前端小白的复习笔记～
一般的网页都分为头、内容、尾三部分，一般写的时候不会有这个问题，因为中间的内容肯定超出屏幕高度，只要让尾部的容器跟在内容后面就是我们想要的效果。但是一旦网页是用来呈现列表，最后一页很可能只有一两条，这时候还用前面所说的方法，尾部就会顶上去，而不在屏幕底部。如果将底部用绝对定位定位在屏幕底部，那么当内容高出屏幕宽度的时候又不合理。所以需要一种方法，让其内容高出屏幕高度的时候尾部在内容后面而不是屏幕底部，当内容少于屏幕高度的时候，让尾部定位在屏幕底部。
以下是代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{height: 100%;} html{height: 100%;} .m-container{position: relative;min-height: 100%;height: auto !important;height: 100%;background-color: red;width: 100%;} .header{width: 100%;height: 200px;background-color: #000;} .main{padding-bottom: 140px;width: 100%;} .footer{position: absolute;bottom: 0;background-color: #ccc;width: 100%;height: 140px;} </style> </head> <body> <div class="m-container"> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </div> </body> </html>
注意，body和html一定要同时设为100%，否则无法起作用。