CSS 3 Column Liquid Layout Dynamic Same Height Column

问题

I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.

CSS Code:

/*    Generated by http://www.cssportal.com    */

/*@import url("/robotics/css/reset.css");*/

html,body {
    background:url(background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*font-size: 13px;*/
    color:#FFFFFF;
    text-align:center;


}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
    display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}


p {
font-size: 10pt;
    padding: 10px;
}

#wrapper {
    width: 100%;
    min-width: 768px;
    /*max-width: 900px;*/
    margin: 0 auto;
}

#headerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
}

#header {
    height: 100px;
    /*border-radius: 10px;*/
    /*border: 1px solid #FFFFFF;*/
    margin: 5px;
}
#header img {
width: 70%;
    height: 100%;
float:left;
margin-left:15%;    

}
#contentliquid {
    float: left;
    width: 100%;
}

#contentwrap {
    margin-left: 15%;
    margin-right: 15%;
    float:left;
    width:70%;

}

#content {
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 5px;
    height: 500px;
}

#leftcolumnwrap {
    width: 15%;
    margin-left:-100%;
    float: left;

}

#leftcolumn {
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 5px;height: 500px;
}

#rightcolumnwrap {
    width: 15%;
    margin-left: -15%;
    float: left;
}

#rightcolumn {
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 5px;height: 275px;
}

#footerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 100px;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 5px;
}

HTML Page:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="page.css">
    <title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
    <p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
    <p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
    <p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
    <p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
    <p>This is the footer.</p>
</div>
</div>
</div>

Is there a way to make all columns the same height dynamically?

回答1:

You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.

Check out this fiddle for an example:

http://jsfiddle.net/kLMtb/

Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.

And take a look at this for an explanation of css table display properties:

http://ajaxian.com/archives/display-table

回答2:

There are 2 ways I know of to achieve equal height columns.

1) CSS tables

FIDDLE

Markup:

<div id="header">
    <p>This is the header.</p>
</div>


<div class="wpr">
    <div id="leftcolumn">
        <p>This is the left column. Please make me the same height as everyone else!</p>
    </div>
    <div id="contentliquid">
        <p>Some content</p>
    </div> 

    <div id="rightcolumn">
        <p>This is the right column. Please make me the same height as everyone else!</p>
    </div>
</div>
<div id="footer">
    <p>This is the footer.</p>
</div>

CSS

#header {
    height: 100px;
    background: orange;
}
.wpr
{
    display:table;
}
#leftcolumn
{
    width: 200px;
    background: aqua;
    display:table-cell;
}
#rightcolumn
{
    width: 200px;
    background: pink;
    display:table-cell;
}

#contentliquid {
    background: yellow;
    overflow:hidden;
    display:table-cell;
}

#footer
{
    clear:both;
    background: green;
}

2) Faux columns

Requires a background image with repeat-y (Read the above article).

Something like this:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

来源：https://stackoverflow.com/questions/19202019/css-3-column-liquid-layout-dynamic-same-height-column

标签

css

multiple-columns

fluid-layout