.footer {
height: 70px;
width: 100%;
background-color: #f7f7f7;
border-top: 1px solid #dbdada;
position: absolute;
bottom: 0;
left: 0;
}
如果设置div.footer设置为absolute的会固定死一屏的底部,
如果设置div.footershe设置relative的话,页面内容很少不到一屏,页脚就不在
页面的底部了,如何二者兼得?
直接上代码吧。
<!DOCTYPE HTML>
<html>
<head>
<title>footer 自适应</title>
<meta charset="utf-8" />
<style>
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
position: relative;
min-height: 100%;
}
div {
text-align: center;
font-size: 14px;
}
.header{
height: 80px;
color: #fff;
background-color: #f95b82;
}
.body{
border: 1px solid #000;
height: 500px;
padding-bottom: 80px;
}
.footer{
color: #fff;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.footer div{
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer">
<div>
<p>footerer</p>
</div>
</div>
</body>
</html>
之前也有这样的需求, 可是后面还是没做。 一个成熟的产品一般不会没有内容的。
也可以用js试试, 就不会有那么乱七八糟的css了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。