我有一个两列布局，其中两列的高度为 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>
什么是让正确的盒子在高度上扩展的好解决方案？每当 左边的呢？
最佳答案
点赞
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
关于html - CSS 高度 100% 两列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18761668/