使Div A与Fluid Div B的高度相同

时间:2012-06-13 07:56:37

标签: html css fluid-layout

我有点坚持......我试图让#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>

感谢。

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

只需将padding-bottom:10000px;margin-bottom:-10000px;添加到每个列,然后overflow:hidden;添加到包装器(example):

<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} */
}

注意:这可能无法在某些旧版浏览器中使用,因此请务必检查以确保其在您需要支持的浏览器中有效。