父级div比子级div小？

Question

这是我的问题，我想用白色填充content div。但是，当我这样做时，它没有填满整个div。子div更大，超出了父div（content）。我希望content div覆盖所有子div。

这是我的代码：

#content {
  width: 100%;
  min-height: 400px;
  height: auto;
  max-height: 2000px;  /* ONLY FOR THE MOMENT */
  margin-top: -7px;
  background:white;
}
#fastMenu {
  float:left;
  width: 200px;
  height: 100%;
  margin-top: 20px;
}
#contenu {
  float:left;
  width: 430px;
  height: 100%;
  margin-top: 20px;
  background:white;
}

<div id = "content">
  <div id = "fastMenu">
    <a href="conseil-d-administration">
      <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuAdmin.png'; ?>" border="0" />
    </a>
    <a href="congres-2012">
      <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" />
    </a>
    <a href="formation">
      <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" />
    </a>            
    <a href="devenir-membre">
      <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" />
    </a>            
  </div>  
  <div id="contenu" class="txt"></div>
</div> 

我也希望能得到一份跨浏览器的答案（支持IE7、IE8、IE9、Firefox、Chrome和Opera）

- user1440480

---

请问您能否在测试网页或JS Fiddle上展示一下代码？ - Francisc

为什么你要使用PHP来输出一个字符串？直接将字符串放在那里即可，不需要用PHP。 - Francisc

您的 #content div 目前比其内容更大（或至少与其内容一样大）：http://jsfiddle.net/qQZdV/ - bfavaretto

@bfavaretto，这是由于´min-height´属性造成的，这可能是一个临时的hack。删除它们，绿色背景就会消失，然后添加´overflow: auto´，它就可以按预期工作了。 - Supr

@user1440480 我全搞错了！我以为你在谈论宽度，而不是高度。 - bfavaretto

Answer 1

将 .content 的 CSS 添加 overflow: auto 属性。

- Rodolfo

---

它会生成一个滚动条，我不想要它（这个滚动条）。 - user1440480

然后，不要使用overflow:auto，在关闭<div id="contenu">后添加<div style='clear:both'></div>。 - Rodolfo

Answer 2

我遇到了同样的问题，添加以下代码都不能解决：

<div style='clear:both'></div>

作为最后一个元素，也不要将父组件的overflow: auto设置为它会添加滚动条。

我发现父组件没有问题，但它的父级（祖父级）有这个CSS：

{
  display:flex,
  flex-direction:column
}

将flex-wrap的值隐式设置为'wrap'

因此，我通过以下方式进行修复：

{
  display:flex,
  flex-flow:column nowrap
}

我在这里发布帖子，因为这是唯一一个我找到的描述我的问题的问题，所以我认为其他处于同样情况的人会从我的答案中受益，而不是在另一个独立的问题中。

- Zied Hamdi