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%;}，但我必须分别为所有这些缓冲区设置位置，并将边距设置为#contentdiv。有时我会有两个、三个缓冲区，有时没有。所以这不是最好的方法。

你有什么好主意我该怎么做？

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;
}