為了讓一些頁面比較美觀，需要讓中間主體內容鋪滿，讓所有內容顯示在窗口中。
頭部和底部固定，中間內容隨着窗口大小變化
這樣就可以隨着窗口大小，中間內容始終都跟着屏幕大小變化
不過如果窗口高度太小了，中間div也會沒有了，所以要設置一個最小高度的值，這里設置600
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> header{ background-color: red; height: 50px; } .container-fluid{ padding: 0; } nav{ background-color: green; } article{ padding: 0; background-color: yellow; } footer{ height: 30px; background-color: blue; } </style> <script type="text/javascript"> $(function(){ function resizes(){ var navHeight=$(window).height()-80;//到當前屏幕的高度，再減去頭部50和底部30的固定高度 navHeight=navHeight>600 ? navHeight : 600//三元運算符，navHeight高度大於600按窗口高度顯示，小於600時高度固定為600 $("nav,article").css("height",navHeight)//添加兩個標簽的高度 } // $(window).on('resize', resizes);//窗口變化時執行resizes方法 // $(window).trigger('resize');// 因為剛開始加載窗口沒有變化，執行不了函數，所以要讓window對象立即觸發一下resize $(window).on('resize', resizes).trigger('resize'); //jquery鏈，一步完成，同樣的意思 }) </script> </head> <body> <header> 11 </header> <div class="container-fluid"> <nav class="col-sm-2"> 22 </nav> <article class="col-sm-10"> 33 </article> </div> <footer> 44 </footer> </body> </html>
還有一種方法，就是給body和HTML標簽設置height:100%，然后給頭部設置10% 中間高度設置80%，底部設置10%，也是一樣鋪滿整個屏幕，但是這樣讓頭部和底部的內容變形比較難看。