footer可以根据浏览器视口高度自适应显示位置,当页面垂直方向可以滚动时,footer显示在文档最底部,当不可滚动时,footer显示在浏览器视口最底部
<div class="root">
<div class="place"></div>
<div class="content">
<div class="header">header</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>
</div>
html,
body,
.root,
.place {
height: 100%;
}
body {
margin: 0;
font-size: 0;
line-height: 1;
}
.place,
.content {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding-bottom: 100px;
}
.content {
width: 100%;
}
.header {
font-size: 26px;
text-align: center;
line-height: 100px;
background: blue;
}
.main {
font-size: 26px;
text-align: center;
line-height: 200px;
background: red;
}
.footer {
position: relative;
margin-top: -100px;
font-size: 26px;
text-align: center;
line-height: 100px;
background: gray;
}