How to Make Div Occupy Remaining Height

How to make div occupy remaining height?

Use absolute positioning:

#div1{    width: 100%;    height: 50px;    background-color:red;/*Development Only*/}#div2{    width: 100%;    position: absolute;    top: 50px;    bottom: 0;    background-color:blue;/*Development Only*/}

<div id="div1"></div><div id="div2"></div>

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>

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 :

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
 min-height: 100vh;
 display:grid;
 grid-template-rows: 50px 1fr
}

#child {

background:yellow;
}

#other-child{
background:red;
 
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

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>

Make div (height) occupy parent remaining height

Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.

Samples

.container {  width: 100px;  height: 300px;  border: 1px solid red;  float: left;}.up {  background: green;}.down {  background: pink;}.grid.container {  display: grid;  grid-template-rows: 100px;}.flexbox.container {  display: flex;  flex-direction: column;}.flexbox.container .down {  flex-grow: 1;}.calc .up {  height: 100px;}.calc .down {  height: calc(100% - 100px);}.overflow.container {  overflow: hidden;}.overflow .down {  height: 100%;}

<div class="grid container">  <div class="up">grid    <br />grid    <br />grid    <br />  </div>  <div class="down">grid    <br />grid    <br />grid    <br />  </div></div><div class="flexbox container">  <div class="up">flexbox    <br />flexbox    <br />flexbox    <br />  </div>  <div class="down">flexbox    <br />flexbox    <br />flexbox    <br />  </div></div><div class="calc container">  <div class="up">calc    <br />calc    <br />calc    <br />  </div>  <div class="down">calc    <br />calc    <br />calc    <br />  </div></div><div class="overflow container">  <div class="up">overflow    <br />overflow    <br />overflow    <br />  </div>  <div class="down">overflow    <br />overflow    <br />overflow    <br />  </div></div>

How to fill 100% of remaining height?

You should be able to do this if you add in a div (#header below) to wrap your contents of 1.

If you float #header, the content from #someid will be forced to flow around it.
Next, you set #header's width to 100%. This will make it expand to fill the width of the containing div, #full. This will effectively push all of #someid's content below #header since there is no room to flow around the sides anymore.
Finally, set #someid's height to 100%, this will make it the same height as #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Update

I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

Make div fill remaining height

I've got a solution that works for Chromium and Chrome but not for FF and I didn't test it on further browsers.

HTML:

<div class="sidebar">
    <div class="table stretch-v">
        <div class="row stretch-v">
            <div class="cell">
                <div class="top-class stretch">
                    Some Content
                </div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="bottom-class">
                    Some other Content
                </div>
            </div>
        </div>  
    </div>
</div>

CSS:

.sidebar{height: 100%; background:grey;}
.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}
.stretch-v {height:100%;}
.stretch {width:100%; height:100%;}
.top-class{overflow:auto;}

And this is what it looks like: Demo

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>

How to Make Div Occupy Remaining Height