Question

我想完全使用100％的窗口。该页面包含标题，内容和页脚区域。

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

标题和页脚具有固定高度（可能会因页眉和页脚响应而发生变化）。在这些块之间，我们有内容部分，它应该得到剩余空间（示例中为黄色区域）。内容应该是可滚动的。页眉和页脚应该是固定的。

目前我们使用jQuery计算并设置剩余高度。此计算通常在window.resize事件中完成。

是否有其他（更好）解决方案或是否可能使用CSS只调整内容区域的高度？

＆＃13;

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']);
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

redValue = myColour Mod 256
greenValue = myColour \ 256 Mod 256
blueValue = myColour \ 65536 Mod 256

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;
}

只需要为body添加CSS，并且确实需要类内容来解决问题。

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

1 个答案: