Question

我有这个示例代码：

<div id="container">
    <div id="left">
        [ some contents...]
    </div>
    <div id="right">
        <div id="inner">
            [ some templates... ]
        </div>
    </div>
</div>

正如你所看到的，我有两个div我希望#right div的高度固定为#left高度，即使在#inner那里也有更长的内容我可以展示一个垂直滚动条......

我怎么能这样做？我问，因为我知道我可以设置为table-cell，但如果#inner内容较长，则第一个div会增加高度以匹配#inner div的高度。

Answer 1

CSS：

#container {min-height: 100px; background-color: beige;}
#right {float: right; position: relative; max-width: 200px;}
#inner {position: relative; height: 100px; overflow: auto;}

HTML：

<div id="container">
    <div id="right">
        <div id="inner">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </div>
    </div>
    <div id="left">
        [ some contents...]
    </div>
</div>

此处也提供了代码：http://jsfiddle.net/c29t7/

Answer 2

http://jsfiddle.net/24rQZ/1/

HTML：

<div id="container">
    <div id="left">
        [ some contents...]
        <br />
        <br />
        <br />
        <br />
        [ some more contents...]
        <div id="right">
            [ some contents...]
            <div id="inner">
               [ some templates... ]
                <br />
                <br />
                <br />                    
                <br />
                <br />
                <br />
                [ some more templates...]
            </div>
        </div>
    </div>
</div>

CSS：

#container {
    position:relative;
}
#left {
    float:left;
    position:relative;
    width:100%;
}
#right {
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    width:75%; /*or whatever looks nice*/

    background:#00ff00;
}
#inner {
    float:right;
    height:100%;
    overflow:auto;
    width:75%; /*or whatever looks nice*/
}

编辑：我认为这就是你要找的东西，我必须把#right放在#left

里面

CSS - 设置两个浮动div的高度，匹配第一个div的高度

2 个答案: