Question

我有两列布局，其中两列高度为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>

什么是一个很好的解决方案，让正确的盒子在高度上扩展;每当左边的那个？

Answer 1

喜欢这个

<强> demo

<强> 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>

OR

Help Full Links为你。

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

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

CSS高度100％两列

1 个答案: