父div比子div小？

Question

这是我的问题，我想用白色填充

content div

。但是当我这样做时，它并没有填满整个 div。子 div 更大，并且它们覆盖父 div（内容）。我希望内容 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）

Answer 1

将

overflow: auto

添加到

.content

的 CSS 中

Answer 2

我遇到了同样的问题，但没有添加解决方案

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

作为最后一个元素，也不是通过创建父组件的

overflow: auto

因为它添加了滚动条。

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

{
  display:flex,
  flex-direction:column
}

将 flex-wrap 值隐式设置为“wrap”

所以我通过制作来修复它：

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

我在这里发帖是因为这是我发现的唯一一个描述我的问题的问题，所以我认为处于我情况的其他人会受益于我在这里的回答，而不是在另一个独立的问题中

Answer 3

有些人可能会发现它有帮助。

子级（或父级）的负边距可能会导致这种影响。

顶部边距：-7px；在这种情况下看起来很奇怪