只要做网页,就百分之九十九会做footer的布局。一般我们最想要的布局是,footer一直固定在网页的底部。如果网页内容不多,就把footer固定在可视区的底部。
总体布局一般是这样的:
<body >
<div class="header">I am header</div>
<div class="content">I am content</div>
<div class="footer">I am footer</div>
</body>
如果content的内容不多,不足使footer撑到底部,就会出现这样的情况。
黑色边框包围的地方为浏览器可视区。可以看到footer是没有贴到可视区底部的。
只需要修改一下代码,既可以解决问题:
body{
width: 100%;
min-height: 100%;
position: relative;
}
.content{
height: 300px;
padding-bottom: 50px; /*当窗口高度很小时,可以使content和footer保持一定的距离*/
}
.footer{
position: absolute;
bottom: 0;
height: 50px;
}
本文仅作为笔记记录。