Css: Height- Fill Out Rest of 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>

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 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;
}

CSS: height- fill out rest of div?

What you want is something like 100% - 200px but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the divs use percentage heights, so you could have something like 10%-10%-80%.

Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

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>

How to make the main content div fill height of screen with css

These are not necessary

remove height in %
remove jQuery

Stretch div using bottom & top :

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

check my code : http://jsfiddle.net/aslancods/mW9WF/

or check here:

body {

    margin:0;

}

.header {

    height: 40px;

    background-color: red;

}

.mainBody {

    background-color: yellow;

    position: absolute;

    top: 40px;

    bottom: 20px;

    width:100%;

}

.content {

    color:#fff;

}

.footer {

    height: 20px;

    background-color: blue;

    

    position: absolute;

    bottom: 0;

    width:100%;

}

<div class="header" >

     

</div>

<div class="mainBody">

     

    <div class="content" >Hello world</div>

</div>

<div class="footer">

     

</div>

CSS: How to make div fill remaining height inside of a flex-child

It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you need additional help please provide more code.