为了让一些页面比较美观，需要让中间主体内容铺满，让所有内容显示在窗口中。
头部和底部固定，中间内容随着窗口大小变化
这样就可以随着窗口大小，中间内容始终都跟着屏幕大小变化
不过如果窗口高度太小了，中间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%，也是一样铺满整个屏幕，但是这样让头部和底部的内容变形比较难看。