DIV不采用父级高度3列

Question

<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'>
    <div class='float_left' style='width:100px; height:100%;'>
    </div>
    <div class='float_right' style='width:100px;'>
    </div>
    <div class='clear'></div>
    <div class='content'>
         //elastic content that sometimes makes the page longer or shorter
    </div>
</div>

No matter how many tutorials or examples I looked at, nothing is helping me. I've tried many different combinations. As soon as I set main_container to a px height, the sidebars then, correctly, take up 100% of the height. But I can't set a px height for the main container.

---

EDIT:

example

The content box will not have a static height. So far what happens is that main_container adjusts it's height based on the content box, but the two sidebars don't adjust there height based on the main_containers height.

Answer 1

In addition to Adrift's answer, you are also overriding the height: 100% with the following height: auto !important - the latter overrides the height setting, even though it is not the source of the problem.

Here is a Gist that works on Chrome and most likely also on other modern browsers as well.

Answer 2

This solution uses CSS tables cells that allow the left/right sidebars to take on the height of the central .content panel.

The HTML:

<div class='main_container'>
    <div class='left_bar'></div>
    <div class='content'>
        <p>Elastic content that sometimes makes the page longer or shorter</p>
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
    <div class='right_bar'></div>
</div>

The CSS:

.main_container {
    display: table;
    width: 100%;
}
.left_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgray;
}
.right_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgreen;
}
.content {
    padding: 0 20px;
}

Demo Fiddle: http://jsfiddle.net/audetwebdesign/zahPD/

As suggested in other comments, you can specify height: 100% or height: inherit to .main_container as required in your application.

Reference for table-cell : https://developer.mozilla.org/en-US/docs/Web/CSS/display

Backwards Compatibility
Works with IE8 and above.

Answer 3

Div not supports height in percent using xhtml document. You use a trick like this:

.main_container{
    position:fixed;
    top:0;bottom:0;
    right:0;left:0;
}

I've write an example here: http://jsfiddle.net/vF6fY/ take a look to it