固定页脚和页眉时的HTML布局动态内容高度

Question

我想精确地使用100％的窗口。 该页面包含页眉，内容和页脚区域。

| HEADER | |-----------| | Content | | | |-----------| |Foot |

页眉和页脚具有固定的高度 （可以更改，因为页眉和页脚将响应）。 在这些块之间，我们有内容部分，该部分应获得剩余空间 （例如黄色区域）。 内容应可滚动。 页眉和页脚应固定。

当前，我们使用jQuery计算并设置剩余高度。 该计算通常在window.resize事件上进行。

还有另一种（更好的）解决方案，还是可能仅使用CSS来调整内容区域的高度？

 angular.module('app', []) .controller('TestController', ['$injector', function($injector) { var vm = this; vm.headers = ["Header1","Header2","Header3","Header4"]; vm.contents = [] for(var i=0; i<35; i++){ vm.contents.push({ label: "Label" + i, content: "Content" + i }) } vm.foo = function(){ alert("Do some magic stuff") } }]); setTimeout(function() { angular.bootstrap(document.getElementById('body'), ['app']); }); 

 #body{ padding: 15px; width: 100%; font-size: 16px; background-color: #C0C0C0; } .header-container { border: solid 1px black; height: 3em; margin-bottom: 1em; background-color: #40E0D0; } .body-container { border: solid 1px black; padding: 20px; background-color: #F0E68C; max-height: 200px; overflow-y: scroll; } .content-container { border: solid 1px black; background-color: #F08080; } .footer-container { text-align: center; margin-top: 1em; background-color: #40E0D0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <div id="body"> <div ng-controller="TestController as vm"> <div class="header-container row"> <div class="col-xs-3" ng-repeat="header in vm.headers"> <div>{{header}}</div> </div> </div> <div class="body-container row"> <div class="row content-container" ng-repeat="content in vm.contents"> <div class="col-xs-3">{{content.label}}</div> <div class="col-xs-9">{{content.content}}</div> </div> </div> <div class="footer-container row"> <button ng-click="vm.foo()"> foo </button> </div> </div> </div> 

Answer 1

上面描述的要求可以通过flexbox解决。

我为此准备了一个简单的示例：

 body{ display: flex; height: 100vh; flex-direction: column; margin: 0; } .content{ flex-grow: 1; height: 100vh; overflow: auto; background: lightgray; } .head{ background: yellow; } .foot{ background: blue; } 

 <div class="head">Head</div> <div class="content"> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> <p>asdfsadf asikfdj sadlkf jasilkfr ioawfh askjh dfkjsdahf kasjdfh sa</p> </div> <div class="foot">Foot</div> 

只需要对CSS进行正文分类，并且确实需要类内容来解决该问题。