常有这样的需求，比如将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方法比较耗性能。