我想使用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进行正文分类,并且确实需要类内容来解决该问题。

10-05 21:02
查看更多