css - 在最小高度 div 下定位 div

Question

我的问题是 - 如何将 div 定位到另一个具有 min-height 样式属性的 div 的底部。看起来像这样

    |-------------------|
    |wrapper            |
    |----------|--------|
    |min-height|min-heig|
    |   div    |   div  |
    |----------|--------|
    |div that keeps     |
    |     disappearing  |
    |-------------------|

所以我的问题是，如果最小高度 div 正在扩展，而不是“不断消失的 div”在这些 div 的扩展下流动，我该如何解决？代码 -

    <div id="wrapper">
      <div id="left" style="float:left;min-height:200px;">
      content
      </div>
      <div id="right" style="min-height:200px;">
      content
      </div>
      <div id="disappearing" style="height:100px;">
      content
      </div>
    </div>

Answer 1

我认为在最小高度 div 和消失的 div 之间使用清除元素就足以解决您的问题。

<div id="wrapper">
    <div id="left" style="border: 1px solid Red;float:left;min-height:200px;height:600px;">content</div>
    <div id="right" style="border: 1px solid Green;min-height:200px; height:400px;">content</div>
    <div style="clear:both;"></div>
    <div id="disappearing" style="border: 1px solid Blue;height:100px;">content</div>
</div>

http://jsfiddle.net/VBEFL/

Answer 2

#disappearing{
    clear:both;
    width:100%;
}

Answer 3

老实说，在这种情况下，最可靠和可维护的解决方案是使用网格系统。一篇优秀的文章是Chris Coyier 的“Don't Overthink It Grids”。

这是基本的、精简的部分：

HTML：

<div id="wrapper">
    <div class="grid">
      <div id="left" class="col-1-2 module-min-200">
      content
      </div>
      <div id="right" class="col-1-2 module-min-200">
      content
      </div>
    </div>
    <div class="grid">
      <div id="disappearing" class="module-fixed-100">
      content
      </div>
    </div>
</div>

CSS：

[class*='col-'] {
  float: left;
}

.col-1-2 { width: 50%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-8 { width: 12.5%; }
.col-1-3 { width: 33.33%; }
.col-2-3 { width: 66.66%; }

.grid:after {
  content: "";
  display: table;
  clear: both;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last {
  padding-right: 0;
}

.grid-pad {
  padding: 20px 0 20px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}

.module-fixed-100 { height: 100px; }
.module-min-200 { min-height: 200px; }