什么是粘连布局(css sticky footer)
当main的高度足够长的时候,紧跟在后面的元素
粘连布局的布局方法
粘连布局由三个组成部分:wrap容器,main内容,footer脚部
<div id="main">
<div class="main">
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
</div>
</div>
<div id="footer">
footer
</div>
具体实现思路:
1、当内容区小于 main 时,保证 main 的最低高度为 视窗高度,此处请注意如果要保证等于视窗高度需要从html,body一层层继承高度100%。同时为了保证底部时刻保持在最底部,需要给 footer 设置 margin-top = 底部的高度。
2、当内容区大于 main 时,为了避免 main 与 footer 重合,可以给 包含的 main 设置 padding-bottom 为底部的高度。具体样式代码如下:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#main{
min-height: 100%;
}
.main{
padding-bottom: 100px;
}
#footer{
height: 100px;
background: pink;
margin-top: -100px;
}
完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#main{
min-height: 100%;
}
.main{
padding-bottom: 100px;
}
#footer{
height: 100px;
background: pink;
margin-top: -100px;
}
</style>
</head>
<body>
<div id="main">
<div class="main">
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>