100% Height Doesn't Work?

+----------------------+ | 1 | | | +----------------------+ | | | | 2 | | | | | |

Solution 1:

It's nice to see the question in it's entirety :)

Demo: JSFiddle

When you have dynamic content and you don't know how tall your page is going to be, you should not set the height property since the height will set it relative to either the parent (or window)'s height. Again, we want the size to be dynamic! So don't set the height property.

I think the question could be rephrased to:

Q: How can you make dynamic areas the same height with only CSS?

To put it simply, you can't. But, you can make them appear to be the same height.

This is a pure CSS implementation that will probably not look quite right in < IE8. I'll expand off of @Adam's answer.

1. Wrap the sidebar elements in a new div (#sidebar) and again, float: left.

2. Set #wrap { overflow: auto }, this will allow #wrap to expand to contain #sidebar in the event that it becomes taller than #main. (Source)

3. Set #sidebar { width: X } and #main { padding-right: X }. This will make it so #main respect's the area on the left that will be taken up by the #sidebar's background.

4. The final part is setting up the background for #sidebar and #main. We'll do this by setting two background images: #wrap { background: url('image1') repeat-y, url('image2') X 0 }, where X is the width of the sidebar. Make sure the image is the same width as the sidebar and only repeat it in the y-direction. The 2nd image will be offset to the right of the sidebar and tiled to fill the rest of #wrap's background.

Since neither #sidebar nor #main have a set height they are free to expand as their content grows. We fixed #wrap to expand to the height of the floated #sidebar, and it will normally expand to cover the height of #main since it is just a normal block element. Because the backgrounds are set to #wrap, we give the appearance that both children are the same height as the parent.

HTML(Added #sidebar)

<div id="header">1</div>
<div id="wrap">
    <div id="sidebar">
        <div id="left-nav">2</div>
        <div id="someid">3</div>
    </div>
    <div id="content">4</div>
</div>

CSS

NOTE: Multiple images will not work < IE8. You can still set a color to #main, but it will not expand to the height of #wrap if #sidebar is taller than #main.

#wrap {
    background: url('image1') repeat-y, 
                url('image2') X 0;
    overflow: auto;
}
#sidebar {
    float: left;
    width: X;
}

#main {
    margin-left: X;
}

Solution 2:

When you set something to 100%, it's 100% of the parent element. So what is the height of the parent element? If that's not set to some value, then you may not get what you are expecting. If the parent is set to 100%, ask yourself, "100% of what? What is the parent set to?" Percent won't give you a size until you get to something of value which may only be the viewport and the size of the html element.

Solution 3:

I have solved my problem this way.....

#left-nav{position: absolute; width: 329px; height: 100%;}
#someid{height: 70%; bottom: 0;}

But still proper solution is recommended.

Solution 4:

You need to either use equalizeCols (a jQuery plugin) to make both columns the same height

-or-

Simulate the look of the left bar by wrapping 3 and 4 in a container div and giving a background image with a different color/pattern on the left side that can repeat-y for the entire height of the content. Make sense?