显示如图：
方法一：全局增加一个负值下边距等于底部高度
//html代码
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
//css代码
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
方法二：底部元素增加负值上边距
//html代码
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
//css代码
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
方法三：使用calc()计算内容的高度
//html代码
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
//css代码
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
3869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
