我想使用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>
最佳答案
上面描述的要求可以通过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进行正文分类,并且确实需要类内容来解决该问题。