0

我有一个两列布局，其中两个有 100% 的高度。到目前为止，一切都很好。

当左列（下例）内容由于下拉菜单而扩展时，问题就出现了。

看看下面的标记。我故意在左侧设置了另一个 div，以说明右侧框没有根据左侧扩展。

<!doctype html>
    <html style="min-height:100%;height:100%">
    <head>
    <title>test</title>
    </head>
        <body style="min-height:100%;margin:0;background-color:#ccc;height:100%">

        <div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
        <div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>

        </body>
</html>

什么是让正确的盒子扩大高度的好解决方案？什么时候左边的呢？

4

1 回答 1

1

像这样

演示

css

html,body{
    height:100%;
}
.container{
    display:table;
    background-color:#ccc;
    width:100%;
    height:100%;
}
.green{
    display:table-cell;
    background-color:green;
    width:50%;
}
.red{
    display:table-cell;
    background-color:red;
    width:50%;
}

html

<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>

或者

Help Full Links为你。

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

于 2013-09-12T10:28:26.777 回答