http://www.webmaster-talk.com/css-fo...l-browser.html

I'm having a strange problem when assigning 100% height to the html tag.

I have a left float div I want to extend to the bottom of the page that is inside a container div. When I assign 100% height to the html tag IE7 and Firefox cut the container short for some strange reason. If I don't assign a 100% height to the html tag then the chain is broken and the left float div won't extend to the bottom of the page.

So I end up in this odd catch-22 where 100% height to the html tag won't let the container extend to the bottom of the page but not adding it to the html tag won't extend the left float div.

<style>


html, body {
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.window {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #CCCCCC;
}


.panel_left {
margin: 20px;
padding: 0;
background: #FFFFFF;
border: 1px solid #000000;
width: 215px;
min-height: 100%;
float: left;
}
</style>

If you give a 100% height to html and body, they will have the same size as the height of the browser-window. Every element that is longer than this height will break out. A relative height is based on the height of the parent-element, so Firefox and iE 7 handle in the most logical way.

Maybe fixed or absolute positioning will help you but It depends on how you really want it to be.

.leftbar {
display:block;
position:absolute;
top:0;
left:0;
width:215px;
height:100%;
}

position:absolute would not be a good solution as it causes some major problems in IE - and it's utterly unnecessary.

The problem is NOT the 100% height rules, the problem is you have not CLEARED your floats... something you MUST do.

Originally Posted by LadynRed

position:absolute would not be a good solution as it causes some major problems in IE - and it's utterly unnecessary.

The problem is NOT the 100% height rules, the problem is you have not CLEARED your floats... something you MUST do.

But clear the floats how? I need two solutions here:

- Get the container to clear with floated divs inside it
- Get the left float div inside the container to extend to the bottom of the page

Example
http://jglasman.name/test/test.html

I've tried adding "overflow: auto;" to the container and that seems to clear it but then I'm scrolling with the container and not the window. In a complicated web page that would not produce acceptable results. Setting the container to "overflow: hidden;" cuts off the majority of content. Furthermore, even with all these solutions the left float div is still not extending to the bottom of the page.

There seem to be a lot of different solutions to produce these effects but I've yet to find ones that work together for what I'm trying to accomplish.

Simple, add a clearing element just before the closing </div> for #window. I use this method:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then <br class="brclear" /> in the HTML - works every time - whereas using overflow can have the consequences you described.

Originally Posted by LadynRed

Simple, add a clearing element just before the closing </div> for #window. I use this method:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then <br class="brclear" /> in the HTML - works every time - whereas using overflow can have the consequences you described.

that doesn't seem to have had any affect

You put the min-height: 100% in the wrong place. Put min-height:100% on .window and just put height: 100% on left panel and it'll work - at least in standards-compliant browsers.

FF3 & IE7

After adding the clearing element, the container still doesn't extend to page bottom nor does the inner left float div. See example

Originally Posted by LadynRed

You put the min-height: 100% in the wrong place. Put min-height:100% on .window and just put height: 100% on left panel and it'll work - at least in standards-compliant browsers.

I'm not so sure. According to the forum's 100% div solution, in order to get a div to extend to the bottom of the page its parent has to have a solid height assigned to it (and all the parents before them) - height:100%. So if thats the case then it won't work if the div is in a container I also need to extend. Once I apply min-height to a div then the height chain is broken and the subsequent divs won't extend to the bottom of their container (at least with that method). See example updated

I think you need to re-read the posted article:

Any time you declare a percentage dimension on an element, make sure its parent element has a dimension set on it as well so that the child will have something to base its percentage dimension off of. In the case of our page, this means we need to add 100 percent height to the body element, and, in turn, its parent, the html element. We want them to stretch to fill the viewport so that the container div can do so as well. Add the following rule to the start of your style element:

html, body {
height: 100%;
}

...what most people really want are not pages that fill the browser viewport and then stop, but pages that are at least as long as the browser viewport. That "at least" is a clue that what you really want is not an absolute dimension, but a minimum one.

What is happening is that the container div is obeying your instructions. You told the body and html elements to stretch to be as tall as the viewport. You then told the container div to be exactly as tall as them. Thus, the container div will never extend past the bottom of the viewport. It will stop once it reaches 100 percent height, and any remaining content will simply overflow out of the bottom.

..we would like our container div is to be at least as high as the viewport, but if the content is longer than the viewport, stretch to contain it. Luckily, CSS provides a way for us to do that with the min-height property. Change the height: 100% declaration in the #container rule to min-height: 100%, then save the page and preview in a non-WinIE browser. Now when you scroll down, the green container div will extend past the bounds of the viewport and contain all of its content.

You can artificially stretch things with Javascript. OR, you can use the faux-columns method. Faux columns is easy and does not lead to hair-pulling.

Originally Posted by LadynRed

I think you need to re-read the posted article:


You can artificially stretch things with Javascript. OR, you can use the faux-columns method. Faux columns is easy and does not lead to hair-pulling.

Blah.