CSS最小高度不符合预期

三个盒子，一个容器，左盒子和主盒子

/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    height:100px;
    float:left;
    min-height:100%;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    min-height:100%;
}
.mainWrapper{
    border:2px solid white;
}

使用HTML：

<div class="mainWrapper">
    <div class="leftMenu">
        left
    </div>
    <div class="mainBox">
        main<br /><br /><br /><br /><br />
    </div>        
</div>

左边
main

---

我的问题是，为什么绿色框（左菜单）在包装器外溢出？

您必须使用css clear属性在mainWrapper之前添加'div'元素，因为您使用float:left on.leftMenu

下面是更正的代码：

/* Left menu */
.leftMenu{
width: 200px;
border:2px solid green;
height:100px;
float:left;
min-height:100%;
}

/* Main Content area */
.mainBox{
width:100%;
border:2px solid red;
min-height:100%;
}
.mainWrapper{
border:2px solid white;
}
.clear{ clear:both;}

和html

<div class="mainWrapper">
  <div class="leftMenu">
    left
  </div>
  <div class="mainBox">
      main<br /><br /><br /><br /><br />
  </div>
  <div class="clear"></div>        
</div>

左边
main

要解决此问题，请在关闭外部div之前使用

，或者使用clearfix（推荐），如：

，因为左侧菜单上有float:left（绿色）。您可以将overflow:hidden放在container div上，container div将按您喜欢的方式展开。

您在谈论哪个浏览器？任何特定浏览器或所有浏览器？浮动元素就是这样工作的。所有浏览器都会出现这种情况。请尝试将mainBox设置为向左浮动。浮动元素的维度不会报告回父元素，因为它们不是页面常规流程的一部分。这就是为什么您需要使用“clearfix”或“clear”强制浏览器停止“flow”，并将左div包含在外部div.Ack中！抱歉，伙计们，高度：100px搞糟了，这意味着%，我不能让左边的菜单填满100%的高度。这将起作用，但是

clear

不再被推荐。为什么使用HTML来解决CSS问题？：）