Both columns same height as deepest column?

问题:

If I have a div layout like this:

<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>

Which makes something like this:

-----------------------------------------------------
|          stretchyheader                           |
-----------------------------------------------------
      |                     |              | 
      |                     |              | 
      |    fixedwidthwide   |  fixednarrow |
      |                     |              | 
      |                     |              | 
      |                     | --------------
      |                     |             
      |                     |             
      |                     |       patterned          
      |                     |       background
      -----------------------
                    -  footer  -

How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.

回答1:

A very simple, common way to do this is using Faux Columns.

You would have a structure that looked something like this:

<div id="stretchyheader"></div>
<div id="container">
    <div id="fixedwidthwide"></div>
    <div id="fixednarrow></div>
</div>
<div id="footer"></div>

And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.

There are CSS techniques to do this without faking it, but they are much more complex:

• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
• http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
• http://www.socialgeek.be/blog/read/flexible-equal-height-columns

回答2:

Adapted from here:

Create a container around the two fixed columns, and have css something like this:

#container {
    float:left;
    width:[sum of the two columns width];
}
#fixedwidthwide {
    float:left;
    width:[whatever];
}
#fixednarrow {
    float:left;
    width:[whatever];
}

Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.

回答3:

There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique and CSS Tabular Display Technique.

The best solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature. It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.

The code for the CSS Tabular Display:

The HTML

<div id="container">
    <div id="rowWraper" class="row">
            <div id="col1" class="col">
                Column 1<br />Lorem ipsum<br />ipsum lorem
            </div>
            <div id="col2" class="col">
                Column 2<br />Eco cologna duo est!
            </div>
            <div id="col3" class="col">
                Column 3
            </div>
        </div>
</div>

The CSS

<style>
#container{
    display:table;  
    background-color:#CCC;
    margin:0 auto;
}

.row{
    display:table-row;
}

.col{
    display: table-cell;
}

#col1{
    background-color:#0CC;
    width:200px;
}

#col2{
    background-color:#9F9;
    width:300px;
}

#col3{
    background-color:#699;
    width:200px;
}
</style>

Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.

The Faux Column Technique could be a solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.

The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:

The HTML file:

<html><head>
<style>
.wraper{
    background-color:#CCC;
    overflow:hidden;
}

.floatLeft{
    float:left; 
}

.block{
    padding-bottom:30000px;
    margin-bottom:-30000px;
    width:100px;
    background-color:#06F;
    border:#000 1px solid;
}
</style>
</head>
<body>
    <div class="wraper">
    <div class="block floatLeft">first col</div>
        <div class="block floatLeft">
                Second col<br />Break Line
        </div>
    <div class="block floatLeft">Third col</div>
</div>
</body>
</html>

In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.

Other resources: link1, link2, link3, link4, link5 (important)