布局如下图：
当content中内容小于页面高度时，占满整个页面；
当content中内容大于液面高度时，以内容高度为准。
test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="height.css"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="sidebar">sidebar</div> 11 <div class="content-right"> 12 <div class="header">header</div> 13 <div class="content"> 14 content 15 </div> 16 <div class="footer">footer</div> 17 </div> 18 </div> 19 </body> 20 <script src="height.js"></script> 21 </html>
test.css
* { padding: 0; margin: 0; } body { height: 100%; } .container { overflow: hidden; } .sidebar { width: 12.5%; float: left; margin-bottom: -9999px; padding-bottom: 9999px; background-color: red; } .content-right { margin-left: 12.5%; } .header { width: 100%; background-color: blue; height: 100px; } .content { width: 100%; background-color: green; } .footer { width: 100%; height: 50px; background-color: pink; }
注意：一定要添加一个container包含所有内容，并添加overflow：hidden；否则会有9999px的空白。如果把overflow：hidden；添加到body上，页面将没有高度上的滚动条。
test.js
1 var _height = document.documentElement.clientHeight-150; 2 document.getElementsByClassName('content')[0].style.minHeight = _height + 'px'; 3 window.onresize = function() { 4 var _height = document.documentElement.clientHeight-150; 5 document.getElementsByClassName('content')[0].style.minHeight = _height + 'px'; 6 };
每当浏览器窗口大小改变的时候，重置一下页面内容的高度。