扩展HTML中的分歧

Question

我正在开发一个HTML页面，其中我有两个分区，中间位于一个换行分区。中间分区包含内容，左侧是导航菜单。 问题是我的中间部分扩展，因为它包含文本，我想使导航高度等于中间的导航高度。

html页面如下，

<div id ="wrap">
<div id="left">
##navigations menu
</div>
<div id="middle">
##content
</div>
</div>

我的CSS如下，

#wrap{
color: #000; 
background: #fff; 
margin: 0px auto 0;
width:800px;
}   
#leftnav{
float:left;
width:181px;
min-height:600px;
padding:10px;
margin-left:11px;
background-color:#CCC;
}
#middle {
float:left;
width:538px;
min-height:580px;
padding:20px;
margin-left:10px;
}

任何人都可以帮忙解决这个问题吗？

Answer 1

查看Faux Columns是否符合您的需求。

Answer 2

没有神奇的解决方案可以做到这一点。 CSS没有根据另一个完全独立的元素的高度来调整元素的高度。

您仍然可以使用变通方法，但要注意所有这些变通办法都是邪恶。

• 使用表格布局。是的，这很糟糕，但它会给你预期的结果。
• 文档准备好后，使用JavaScript调整高度。当然，您必须考虑到您的某些用户未启用JavaScript。
• 更改您的设计。例如，如果您的左侧面板具有黑色背景并且宽度为200px，则可以为中间部分设置黑色200px边框，填充剩余空间，并向左侧面板浮动以悬停边框。

您还可以尝试使用父<div/>。例如，如果您需要左侧面板的边框，填充页面的整个高度，您可以设置父级<div/>的边框和中间分割元素的左边框。