html css 2 column layout, both columns same height

问题:

I have a two column layout set up, and I want to have both columns automatically stretch to fill parent div of the two columns, The reason being that the left column has a background and border to it, and i want it to take up the entire side of the page so it won't look messy and such. I use inline-block to align the two columns, not float or anything (I can't use overflow:hidden because it messes up some of my features that may go out of the div, ex: dropdown menus) So I need to find a simple way to do this, using this method.

jsfiddle:

http://jsfiddle.net/sFBGX/

回答1:

You can use CSS table layout (not HTML table layout, that would be poor semantics):

.container {
    display: table;
    table-layout: fixed;
    width: 944px;
    font-size: 0.75em;

}
.col {
    display: table-cell;
    vertical-align: top;
}

.container .left
{
    width: 236px;
    background-color:grey;
}
.container .right
{
    width: 708px;
    background-color:yellow;
}

<div class="container">
    <div class="col left">Left</div>
    <div class="col right">Right
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Hey
      
    </div>
</div>

Compatibility is IE8+ and fallback for IE6/7 if needed is exactly the same as for inline-block

Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)

回答2:

Try this: http://jsfiddle.net/scrimothy/Y2ZsJ/

Just add this to your css:

.container { overflow: hidden; }
.container div { 
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

(from: http://css-tricks.com/fluid-width-equal-height-columns/ under the heading: One True Layout Method)