1

我有点卡在某事上……我正试图达到与流体#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>

谢谢。

4

2 回答 2

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/

于 2012-06-13T08:08:34.333 回答
0

只需添加padding-bottom:10000px;margin-bottom:-10000px;到每一列和overflow:hidden;包装器（示例）：

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

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

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

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
    padding-bottom:10000px; /* Taller than tallest possible column */
    margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
    padding-bottom:10000px; /* Same as #left{padding-bottom} */
    margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}

注意：这可能不适用于某些较旧的浏览器，因此请务必检查以确保它在您需要支持的浏览器中有效。

于 2012-07-10T16:24:37.683 回答