html - 使 Div A 与 Fluid Div B 高度相同

Question

我有点卡住了...我正在尝试让 #right 与 #left 的高度相同，但 #right 是流动的。我该怎么做呢？

 #container {
    width: 960px;
    margin: 0 auto;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
}

-

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test
    </div>
</div>

谢谢。

Answer 1

您可以通过应用模拟 100% 高度的背景图像来做到这一点 #left:

HTML

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test<br />test
    </div>​
</div>

CSS

#container {
    width: 960px;
    margin: 0 auto;
    background: url(http://www.dummyimage.com/180x1/ccc/ccc.png) repeat-y;
    overflow:hidden;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
    height: 100%;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
    height; 100%;
}​

现场演示:http://jsfiddle.net/TqKMW/
有关此技巧的更多信息:http://www.alistapart.com/articles/fauxcolumns/