css页面布局，实现内容部分自适应屏幕，当内容高度小于浏览器窗口高度时，页脚在浏览器窗口底部；当内容高度高于浏览器窗口高度时，页脚自动被撑到页面底部。
<style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .main { overflow: hidden; position: relative; min-height: 100%; background: #eee; } .red { margin-bottom: 50px; height: 200px; background: #f00; } .footer { position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; background: #0f0; } </style> <body> <div class="main"> <div class="red"></div> <div class="footer"></div> </div> </body>