Pure CSS solution for fixed height as function of remaining space - html

Question

I have a page containing a header and three other divs of irrelevant content, like this.
+-----------+
| header |
+-----------+
| 1 | 2 |
+-----+-----+
| 3 |
+-----------+
What I need is for the tables to take up the remaining space on the page, but not extend beyond the viewport (there should be no vertical scrollbar on the page).
In other words, the height of 1, 2, and 3 should be exactly 50% of the remaining space (after the header). How can I accomplish this without JS and also without fixing the height of the header?

Answer 1

It can be done using CSS tables and quite a few nested div elements.
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>