# 粘连布局
# 为内容区域添加最小的高度
- min-height
- padding-bottom top元素
- margin-top bottom元素
<!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%;
background-color: orange;
}
.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>
# flex布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*{
padding:0;
margin:0;
}
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
background:grey
}
.footer{
flex: 0;
height:100px;
}
.num{
height:200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="content">1
<div class="num">2</div>
<div class="num">2</div>
<div class="num">2</div>
<div class="num">2</div>
<div class="num">2</div>
<div class="num">2</div>
</div>
<div>333</div>
</body>
</html>
这样的布局简单使用，比较 推荐。