使两个浮动 div 匹配高度答案

【问题标题】：Making two floating divs match height使两个浮动 div 匹配高度
【发布时间】：2013-05-01 20:23:28
【问题描述】：

我知道在其他地方有人问过这个问题，但我找不到解决方案。我有一个简单的布局。一个容器 div，里面有两个浮动 div。左侧 div 包含导航并具有背景图像。右侧的 div 具有坚实的背景，并且根据每个页面的内容是动态的。我对内容 div 没有任何问题。我的问题是我希望左 div 垂直“拉伸”以匹配内容 div 的高度。发生的事情是左边只是伸展到最小高度值。这是我的 CSS：

#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}

#containerNavigation    {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}

#containerContent   {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}

您可以通过访问此页面查看问题：http://www.athensfireandrescue.org/?pid=7

我确信这很简单，但我无法确定。抱歉这个多余的问题，但我的搜索没有找到可行的解决方案。

【问题讨论】：

标签： css

【解决方案1】：

高度可能有点棘手。然而，目标是确保父容器具有 100% 的高度。您的网页中有很多内容。所以我创建了一个独立的演示来演示它是如何工作的。

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

html, body {height:100%;}

.wrapper {
    width:400px;
    height:100%;
    margin:0 auto;
}
.left { 
    width:198px;
    border:1px solid black;
    float:left;
    height:100%;
}
.right {
    width:198px;
    border:1px solid red;
    float:left;
    height:100%;
}

演示：

http://jsfiddle.net/nFdtT/

我注意到的其他一些东西：

如果我能提供一些建议，我会提出以下建议：

除非是表格数据，否则不要使用表格。应使用列表构建您的资产净值。
删除所有内联样式并将它们放在单独的样式表中。
<meta> 和 <style> 标签应该在您文档的 <head> 中。（由于某种原因，您的 <head> 中嵌套了部分文档类型标题）
如果您还没有，我建议您使用 CSS 重置。

【讨论】：

我把这个页面拿过来了，没有意识到还有任何桌子。接得好。删除了表格以及内联样式。现在有新问题 :-) 我的一个浮动 div 的内容流过容器 div。添加一个明确的课程似乎没有奏效。你能再看看同一个页面，看看你是否能看到问题。
修复它的一种方法是在.content {overflow:auto; overflow-x:hidden;} 上将溢出设置为自动。但是我不确定那是你想要做的。这真的取决于我猜你的设计是什么样的。您的内容容器内还有一个<meta> 标签和一个<title> 标签。这些都应该存在于文档的<head> 中。
到达那里。溢出：自动...在 div 内给我滚动条。我只希望整个容器 div (.template) 扩展以适应 .content 中没有滚动条的任何内容。宽度永远不会比内容 div 宽，但高度会根据每个页面的内容而动态变化。
我刚刚意识到你在说什么关于元和标题标签。我承认我非常依赖 Dreamweaver 进行编码。我是一个图形人，试图玩网站游戏的两面。 Dreamweaver 自动添加了这个垃圾，但我没有发现它。