父div小于子div？

Posted 2023-02-16

【中文标题】父div小于子div？

【英文标题】：Parent div is smaller than child div?

【发布时间】：2012-06-23 00:04:09

【问题描述】：

这是我的问题，我想用白色填充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）

【问题讨论】：

能否给我们展示一下测试网页或 JS fiddle 上的代码？

你为什么使用 PHP 来回显一个字符串？只需将字符串放在不需要 PHP 的地方即可。

您的#content div 当前更大（或至少与其内容一样大）：jsfiddle.net/qQZdV

@bfavaretto，这是因为 'min-height' 属性，这可能是一个临时的 hack。删除它们，绿色背景消失，然后添加“溢出：自动”，它按预期工作。

@user1440480 我错了！我以为你说的是​​宽度，而不是高度。

【参考方案1】：

将overflow: auto 添加到.content 的css

【讨论】：

它是一个滚动条...我不想要它（滚动条）

然后在关闭<div id="contenu"> 后添加<div style='clear:both'></div> 而不是overflow:auto