这里footer也固定包括两种情况，第一种是当页面内容尚未填充满的时候，页脚需要固定在底部，第二种是页面填充满后，页脚需要随页面内容的增加而填充在主体内容的下方。我需求这两种情况结合在一起实现！第二张需求单独实现<html><head><style type="text/css">html,body{height:100%}.footer {margin-top:-30px;height:30px;background-color:#eee;}.wrap{min-height:100%}.main{padding-bottom:30px;overflow:hidden;}</style></head><body><div class="wrap"> <div class="main">这里是网页的主体</div></div><div class="footer">这里是页脚</div></body></html>
2 回答
撒科打诨
TA贡献1934条经验 获得超2个赞
可以试试position：fixed;
footer可以使用绝对定位，相对与page元素，结构比如这样
<div class="page">
<div class="header">11111</div>
<div class="footer">22222</div>
</div>
.page{
position: relative;
}
.footer{
position: absolute;
bottom: 0;
}
这样footer就一直居于page元素的底部了
page还要设计一个min-height,值为一开始没内容的时候的高度
慕标5832272
TA贡献1966条经验 获得超4个赞
两种都可以用css来实现
第一种：
div{height:100%;}
header{height:50px;}
div.body{height:calc(100% - 100px);}
footer{height:50px;}
第二种：
div{height:100%;}
header{height:50px}
div.body{min-height:1px;}
footer{height:50px}
二者结合：
div{width:100%;height:100%;}
header{height:50px}
div.body{min-height:1px;height:auto;max-height:calc(100% - 100px);}
footer{height:50px}
html结构
<html>
<body>
<div>
<header></header>
<div class="body"></div>
<footer></footer>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消