child div not expanding to parent div

Question

So I have three div's

One parent and two child.

The parent is as follows:

#parent {
  overflow:auto;
  margin: 0 auto;
  margin-top:37px;
  min-height: 100%;
  width:875px;
}

the two child divs are as follows

#child1 {
  overflow:auto;
  min-height:150px;
  border-bottom:1px solid #bbb;
  background-color:#eee;
  opacity:0.4;
}

#child2 {
  height:100%;
  background-color:white;
}

The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.

Taking a guess, is this what you are trying to do: http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height — jmacinnes, Dec 08 '11 at 04:02
no, my the second child div is not stretching fully to the height of the parent and each line that i type in extends the div. Other than that, the div won't extend. — DemCodeLines, Dec 08 '11 at 04:04

score 3 · Accepted Answer · answered Dec 08 '11 at 04:12

height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.

You can cheat when it comes to the body tag, so if you had something like this:

<body>
  <div style="height: 100%">
  </div>
</body>

Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.

Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):

<div id="parent">
   <div id="childNorm"></div>
   <div id="childStrech"></div>
</div>



#parent
  {
      position: absolute;
      width: 1000px;
      bottom: 0;
      top: 0;
      margin: auto;
      background-color: black;
  }

  #childNorm
  {
     position: absolute;
     width: 1000px;
     top: 0;
     height: 50px;
     background-color: blue;
     color: white;
  }

  #childStrech
  {
     position: absolute;
     width: 1000px;
     top: 50px;
     bottom: 0;
     background-color: red;
     color: white;
  }

Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/

The trick:

When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.

score 2 · Answer 2 · answered Dec 08 '11 at 04:24

Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.

child div not expanding to parent div

2 Answers2

Linked