Question

HTML：

<div id="header">
    &nbsp;
</div>
<div id="wrapper">
    <div id="col1">
        Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
    </div>
    <div id="col2">
        &nbsp;
    </div>
    <div id="col3">
        Lorem Ipsum<br/>Lorem Ipsum
    </div>
</div>
<div id="footer">
    &nbsp;
</div>

CSS：

#header{background:#aaa;height:100px}
#wrapper{background:#000;float:left}
#col1{background:#f00;float:left;width:300px}
#col2{background:#0f0;float:left;width:5px;height:100%} /* DOESN'T WORK */
#col3{background:#ff0;float:left;width:300px}
#footer{background:#aaa;height:100px;clear:both}

JSFiddle：http://jsfiddle.net/Ya9RR/16/

如何使col中的任何一个具有100％的高度？

Answer 1

您需要将Columns的外部容器设置为也占用100％的高度，因为％相对于其父级。

HTML：

<html>
<body>
<div id="wrapper">
    <div id="col1">
        Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
    </div>
    <div id="col2">
        &nbsp;
    </div>
    <div id="col3">
        Lorem Ipsum<br/>Lorem Ipsum
    </div>
</div>
</body>
</html>

的CSS：

body, html {height: 100%;}
#wrapper{background:#000;float:left; height: 100%;}
#col1{background:#f00;float:left;width:300px;height:100%}
#col2{background:#0f0;float:left;width:5px;height:100%}
#col3{background:#ff0;float:left;width:300px;height:100%}

小提琴：http://jsfiddle.net/Ya9RR/14/

Answer 2

有很多方法可以做到这一点：http://css-tricks.com/fluid-width-equal-height-columns/我喜欢这个：http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

#col1, #col2, #col3 {
    min-height: 300px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    _height: 300px;
}

更新小提琴：http://jsfiddle.net/Ya9RR/8/

CSS中的100％高度列

2 个答案: