什么是粘连布局(css sticky footer)
-
当main的高度足够长的时候,紧跟在<\main>后面的元素<\footer>会跟在其后面;
-
当<\main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<\footer>元素能够“粘连”在屏幕的底部。
-
三个组成部分:wrap容器,main内容,footer脚部
方法一:footer 上用负的 margin-top
- 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 footer 覆盖任何实际内容。
//html结构
<body>
<div id="wrap">
<div id="main">
main<br/>
main<br/>
</div>
</div>
<div id="footer"></div>
</body>
//css样式
html, body {
height: 100%;
margin: 0;
}
#wrap{
width: 100%;
min-height: 100%;