Question

Alrighty,

I’m going to try to explain what I have going on. Let me know if you need more information.

Basically, I have a div container, and I have it styled at height:100%; It will do 100% but it will only be 100% for the current browser/window size.

For example: if I maximize the browser, the container will do 100%, but if I scroll down, that container’s height only goes as much as whatever the browser height was.

Another example: if I minimize the browser to a certain size and refresh the page, the container will go 100% again to the window size only. So if I maximize the browser, the height container will still be the same height has if the browser was minimize.

So if I have a long page, the container doesn’t go all the way down to the page, the container only goes so far as the window’s height size when the page loads.

I’m trying to get the container to go all the way 100% till the bottom of the page, even if I have a footer or header, the container should be 100% between the two.

So I’ll try to post up the most relevant code:

body,html
{
   display:block;
   position:relative;
}
#container_100percent
{
   overflow-x:hidden;
   position:relative;
   overflow-y:auto;
   width:20%;
   min-height:100%;
   height:100%;
   float:right;
}


<div>
  <div id="container_100percent">
     <!-- some stuff !-->
  </div>
</div>

Answer 1

The height of 100% is the height of his parent.

This means: if the parent div-container has no height, the height will be set to 100%, too and same for body. This is why your div has the height of your window.

So you need to give your div wrapper a height and the inner div will take on this height.