0

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

我确信这很简单，但我不能指望它。对不起，多余的问题，但我的搜索只是没有找到可行的解决方案。

4

1 回答 1

0

高度可能有点棘手。然而，目标是确保父容器具有 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/

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

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

  1. 不要使用表格，除非它是表格数据。您的资产净值应使用列表构建。
  2. 删除所有内联样式并将它们放在单独的样式表中。
  3. <meta>并且<style>标签应该在<head>您的文档中。（由于某种原因，您的内部嵌套了部分 doctype 标题<head>）
  4. 如果您还没有，我建议您使用 CSS 重置。
于 2013-05-07T19:18:59.280 回答