html - 将 child 的高度扩展到未声明高度的 parent

Question

我有 3 个并排的 div block 。左边是广告，中间的高度不明，可能是100px高度，也可能是1000px，右边也是比较不知名的高度。这 3 个 div 中的任何一个都可能是容器中最高的东西。

我希望左边的 div 延伸到容器 div 的底部。然后我可以将广告居中，但重要的是我将“左”延伸到其父项的底部。

http://jsfiddle.net/wuo4jvwu/

.container{
    background:green;
    display: inline-block;
}
.left{
    float:left;
    margin-right:10px;
    width:100px;
    background:red;
}
.ad{
    height:200px;
    width:100px;
    background:pink;
}

.middle{
    float:left;
    margin-right:10px;
    width:200px;
    background:red;
}
.right{
    float:left;
    width:100px;
}

.right .news{
    background:red;
    width:inherit;
    height:200px;
}

.right .tweets{
    background:red;
    margin-top:10px;
    clear:both;
    width:inherit;
    height:100px;
}

.clear { clear: both; }

<div class="container">
    <div class="left">
        <div class="ad">AD</div>
    </div>
    <div class="middle">
        <ul>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
            <li>ITEM</li>
        </ul>
    </div>
    <div class="right">
        <div class="news">news</div>
        <div class="tweets">tweets</div>
    </div>
    <div class="clear"></div>
</div>

Answer 1

你可以在parent(.container)中添加overflow: hidden和position: relative并添加position: absolute 到 .left:

.container {
  background: green;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.left {
  height: 100%;
  position: absolute;
  left: 0;
}
.ad {
  height: 100%;
  width: 100px;
  background: pink;
}
.middle {
  float: left;
  margin-right: 10px;
  width: 200px;
  background: red;
  margin-left: 110px;
}
.right {
  float: left;
  width: 100px;
}
.right .news {
  background: red;
  width: inherit;
  height: 200px;
}
.right .tweets {
  background: red;
  margin-top: 10px;
  clear: both;
  width: inherit;
  height: 100px;
}
.clear {
  clear: both;
}

<div class="container">
  <div class="left">
    <div class="ad">AD</div>
  </div>
  <div class="middle">
    <ul>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
    </ul>
  </div>
  <div class="right">
    <div class="news">news</div>
    <div class="tweets">tweets</div>
  </div>
  <div class="clear"></div>
</div>