Home/ Questions/Q 6939513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:37:56+00:00

So I have three div’s One parent and two child. The parent is as

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0