html - 流体柱和固定缓冲柱 - 如何使用 css 使它们的高度等于流体柱？

Question

我希望这些空的 div 与流动的 div 具有相同的高度。

http://jsfiddle.net/QLdZs/

html:

<div id="container">
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div id="content">
        this is content<br/>
        lalala<br/>
        lala<br/>
        lala<br/>
        lalalalala lala la<br/>
        o sole mio<br/>
    </div>
 </div>

CSS:

#container {
 overflow:hidden;   
}
.buffer {
    float:left;
    background-color:red;
    width:100px;
    min-height:10px;
    border-right:1px solid white;
 }
#content {
    overflow:hidden;
    background-color:green;
}

我知道我可以制作#container {position:relative;}，然后设置.buffer {position:absolute;height:100%;} 但我'您必须分别为所有这些缓冲区设置位置，并将边距设置为 #content div。有时我会有两个、三个缓冲区，有时没有。所以这不是最好的方法。

你知道我该怎么做吗？

Answer 1

看看这篇文章，我想这是你需要的: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

不过，我通常只使用固定高度。

转自文章:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

和 CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}