Fill Remaining Vertical Space - Only CSS

Fill remaining vertical space - only CSS

You can do this with position:absolute; on the #second div like this :

FIDDLE

CSS :

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT : Alternative solution

Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :

FIDDLE

HTML :

<div id="wrapper">
    <div id="first"></div>
</div>

CSS :

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}

Fill remaining vertical space with CSS using display:flex

Make it simple : DEMO

section {  display: flex;  flex-flow: column;  height: 300px;}
header {  background: tomato;  /* no flex rules, it will grow */}
div {  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/  background: gold;  overflow: auto;}
footer {  background: lightgreen;  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/}

<section>  <header>    header: sized to content    <br/>(but is it really?)  </header>  <div>    main content: fills remaining space<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>    <!-- uncomment to see it break -->    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>    <!-- -->  </div>  <footer>    footer: fixed height in px  </footer></section>

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>

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>

Fill container's remaining vertical space with image while inheriting image's width

Edit

To get a perfect aspect ratio with different font sizes, you can use em instead of px.
In this jsfiddle https://jsfiddle.net/ormhukax/, I set the line height to 1.2 and used 1.2em in the CSS calc.

Final CSS:

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  font-size: 48px;
  line-height: 1.2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 1.2em - 10px);
}

Take a look at this fiddle:
https://jsfiddle.net/4nw03vrd/2/

This is the CSS I used:

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 328px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  font-size: 16px;
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 28px);
}

The calc() is needed to compensate a minor distortion in the aspect ratio, which is negligible if the image is larger enough than text height, and it is basically the font size + the bottom padding

Fill Remaining Vertical Space - Only CSS