CSS min-height表现不如预期

Question

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

/* 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>

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

Answer 1

要解决此问题，请在关闭外部div之前使用<div style="clear:both"></div>或使用clearfix（推荐），如：http://positioniseverything.net/easyclearing.html

Answer 2

你必须在带有css clear属性的mainWrapper之前添加'div'元素，因为你在.leftMenu上使用float：left。

以下是更正后的代码：

/* 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>

Answer 3

因为你有浮动：左侧菜单左侧（绿色）。您可以将overflow：hidden隐藏在容器div上，容器div将按照您喜欢的方式展开。