描述：在移动端经常有这样的效果，当页面内容高度不足视口高度时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;
}
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
