代码
<style>
body,
html {
height: 100%;
}
.wrapper {
height: 100%;
}
.main {
min-height: 100%;
/* 与.footer的高度对应 */
padding-bottom: 100px;
background: red;
color: white;
box-sizing: border-box;
}
.footer {
height: 100px;
/* 与.footer的高度对应 */
margin-top: -100px;
background: blue;
color: white;
}
</style>
<body>
<div class="wrapper">
<div class="main">主题</div>
<div class="footer">底部</div>
</div>
</body>
演示
- 不满一屏
演示一.jpg
- 超出一屏
演示二.gif
