常有这样的需求，比如将footer“固定”在底部，如果内容区没有占满整个屏幕，footer固定在底部，若内容区超过屏幕，则footer处于内容区的尾部。总之就是内容铺不满，footer固定在窗口底部，若内容能铺满，则处于内容区下面。
HTML结构：
<body>
<div class="container">
<div class="main"> balabalbalabla
</div>
</div>
<div class="footer">Footer</div>
</body>
CSS部分，有两种方法，
1. footer固定高度，container设置最小高度。
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
.container {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
background-color: grey;
}
2. footer固定高度，main设置padding-bottom等于footer的高度，然后footer设置margin-top为footer的高度。
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.main {
padding-bottom: 80px;
}
.footer {
background-color: grey;
margin-top: -80px;
height: 80px;
}
个人喜欢第二种方法，calc方法比较耗性能。
时间： 2024-11-05 06:14:55