css
.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的话,页面内容很少不到一屏,页脚就不在
页面的底部了,如何二者兼得?
结构:(伪代码)
slim
body .content-container .footer
样式:
scss
html, body { height: 100%; } .content-container { min-height: 100%; margin-bottom: -70px; padding-bottom: 70px; box-sizing: border-box; } .footer { height: 70px; }
注:以上只写了必要的代码,你可以按需添加别的代码
可以给内容的div添加一个min-height吧
Smart footer
直接上代码吧。
<!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了。