描述:在移动端经常有这样的效果,当页面内容高度不足视口高度时footer固定在底部,而页面内容高度高于视口高度时,footer随内容向下移动。
方法一: 使用 calc 实现(不推荐)
// html
<body>
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</body>
// css
.main {
min-height: calc(100vh - header高度 - footer高度)
box-sizing: border-box; // 如果main有设置padding和border则须设置
}
方法二:使用 flex 布局(推荐)
// css
.container {
min-height: 100vh; /*高度最小为视口的高度*/
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
方法三:处理兼容性
缺点:必须指定 footer 的高度
// css
body, html {
height: 100%;
}
.container {
height: 100%;
}
.main {
min-height: 100%;
margin-bottom: -50px;
}
.footer {
height: 50px;
}