1

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>
​&lt;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% 的高度？

4

2 回答 2

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/

于 2012-11-15T21:01:53.097 回答
-1

有很多方法可以做到这一点：http ://css-tricks.com/fluid-width-equal-height-columns/我喜欢这个：http://blog.mozilla.org/webdev/2009/02/20 /跨浏览器内联块/

#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/

于 2012-11-15T20:50:04.050 回答