Make a Div Fill the Height of the Remaining Screen Space

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></div>

CSS Div fill remaining height

Give the container:

display:flex;
flex-direction:column;

and for the element:

flex:1;

The demo:
https://jsfiddle.net/ugjfwbg4/1/

body {  background-color: red;  height: 100%;}
.wrap { height: 100vh; width: 100%; padding: 20px; background-color: yellow; display:flex; flex-direction:column;}
.top { width: 100%; height: 50px; background-color: blue;}
.mid { width: 100%; background-color: green; flex:1; display:flex; flex-direction:column;}
.left{ flex:1; width: 50%; background-color: red;}
.bottom { width: 100%; height: 50px; background-color: blue;}
<div class="wrap">  <div class="top"></div>
<div class="mid"> <div class="left">left</div> </div>
<div class="bottom"></div></div>

Make inner div fill remaining height using flex

I edited @Sfili_81's answer and added these to the *

margin: 0;
padding: 0;

Here's the entire code

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.home-content {
display: flex;
border: 1px solid black;
height: 100vh;
flex-flow: column;
}

.container {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid red;
}

#listItems {
border: 3px solid green;
flex: 1 1 100%;
}
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">

</div>
</div>
</div>
</div>

CSS: Have content take up remaining height and its children share the same height equally

Using flex:

body {
font-family: sans-serif;
}

html,
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}

.app {
min-height: 100%;
background: #00fa
}

.app,
.content {
display: flex;
flex-direction: column;
}

.content {
flex: 1;
background: #fe0;
}

.content > a {
flex: 1;
border:solid 1px;
}

.nav {
display: flex;
}
<div id="app" class="app">
<nav class="nav">
<li>some</li>
<li>nav</li>
<li>items</li>
</nav>

<header>
<h2>
Where do you want to go?
</h2>
</header>

<!-- Content should take all of the remaining available height -->
<div class="content">
<!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width -->
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
</div>

How to make an HTML div occupy the rest of the available height

You could use css grid on #parent and control everything from there, and it will be as simple as this :