固定高度的纯CSS解决方案作为剩余空间的功能

Question

我有一个页面包含一个标题和其他三个不相关内容的div，像这样。

+-----------+ 
| header | 
+-----------+ 
| 1 | 2 | 
+-----+-----+ 
|  3  | 
+-----------+ 

我需要的是对表占用页面上的剩余空间，但不能超出视（应该有页面上没有垂直滚动条）。

换句话说，1,2的高度，以及3应的剩余空间（在报头之后）的正好50％。我如何在没有JS的情况下完成这个任务，并且不需要固定头部的高度？

Answer 1

它可以使用CSS表格和不少嵌套的div元素完成。

body, html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    background-color: tan; 
 
    display: table; 
 
    width: 100%; /* optional, depends on layout */ 
 
} 
 
.header-row { 
 
    display: table-row; 
 
} 
 
.header-row img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.content-row { 
 
    height: 100%; 
 
    display: table-row; 
 
} 
 
.content-row { 
 
    border: 1px dotted blue; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    display: table-cell; 
 
} 
 
.content { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.row .cell { 
 
    display: table-cell; 
 
    height: 50%; 
 
    width: 100%; 
 
    border: 1px dotted blue; 
 
} 
 
.row .split { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
    border: 1px dotted blue; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="header-row"> 
 
    <div class="header"> 
 
     <img src="http://placehold.it/1000x200"> 
 
    </div> 
 
     </div> 
 
    <div class="content-row"> 
 
     <div class="content"> 
 
      <div class="row"> 
 
       <div class="cell"> 
 
        <div class="split">split</div> 
 
        <div class="split">split</div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="cell">stuff</div>     
 
      </div> 
 
     </div> 
 
     </div> 
 
</div>