Question

我知道其他地方已经被问过，但我找不到解决办法。我有一个简单的布局。一个容器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

我确信这很简单，但我不能把手指放在上面。很抱歉这个多余的问题，但我的搜索并没有找到可行的解决方案。

Answer 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>中。（出于某种原因，您的部分doctype标题嵌套在<head> 内）
如果你还没有，我会建议使用CSS重置。

使两个浮动div与高度匹配

1 个答案: