How to Stretch a Div to 100% Page Height

How can I stretch a div to 100% page height?

Try (it should work in most browsers):

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}

div stretch 100% page height regardless of content

see this jsfiddle

html, body {height: 100%;}
.container {min-height: 100%;}

discussing this over here too.....

proper css to ensure that the body element fills the entire screen

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {  margin: 0;}
.flex-container {  display: flex;  flex-direction: column;  min-height: 100vh;}
header {  background-color: #3F51B5;  color: #fff;}
section.content {  flex: 1;}
footer {  background-color: #FFC107;  color: #333;}

<div class="flex-container">  <header>    <h1>     Header       </h1>  </header>
  <section class="content">    Content  </section>
  <footer>    <h4>      Footer    </h4>  </footer></div>

CSS stretching to 100% Height

Flexbox can do that.

Codepen Demo

* {  margin: 0;  padding: 0;  box-sizing: border-box;}html {  height: 100%;}body {  min-height: 100%;  display: flex;  flex-direction: column;}header {  height: 50px;  background: #bada55;}section {  display: flex;  flex: 1;  background: #c0ffee;}aside {  width: 150px;  background: darkgoldenrod;}main {  min-height: 100%;  /*height: 2000px;*/  /* uncomment this to see difference */  background: blue;  flex: 1;}

<header></header><section>  <aside></aside>  <main></main></section>

Make an absolutely positioned div stretch to 100% of the document height with no JavaScript

The problem is that your absolutely positioned div is larger than your body which is why you are having the problem of the white background. If you simply add overflow:auto; to your #background, it should handle the overflow properly

Example

Make nested div stretch to 100% of remaining container div height

I have spent way too much time trying to figure it out, but by George I've got it!

The "Eureka" moment was reading other questions where people were asking "how can I do it without using tables?" Because of course this layout is easy with tables. But that made me think of display:table.

As this blog post nicely argues, using display:table gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.

I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.

Voila!

Condensing just the essential code:

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body,
html {
  height: 100%;
}

.container {
  display: table;
  width: 100% height: 100%;
  /* this will be treated as a Minimum! It will stretch to fit content */
}

div.wrapper {
  display: table-row;
  height: 0px;
  /* take as little as possible, while still fitting content */
}

img {
  display: table-cell;
  width: 100%;
  /*scale to fit*/
}

.bottom {
  display: table-cell;
  height: 100%;
  /* take as much as possible */
}

<div class="container">
  <div class="wrapper">
    <img src="http://placekitten.com/600/250" />
  </div>
  <div class="bottom" contentEditable="true">
  </div>