html - css浮动元素增加父级高度但100％高度的兄弟级不起作用

Question

我有一个有 2 个孩子的容器：一个是浮动的并增加了他父母的高度，第二个不是浮动的并填充了其余的宽度。我也想让第二个填充高度。

这是我的问题的一个小提琴：http: //jsfiddle.net/LAesa/

在这个小提琴中，我想让红色 div 填充他父母的 100% 高度。

这里的html：

<div id="container">
    <div id="float">
        The floating <br/>column
    </div>

    <div id="fill">
        This one fill the rest
    </div>

    <div class="clearfloat"></div>
</div>

这里的CSS：

#container {
    width: 500px;
    background-color: yellow; 
}

#float {
    width: 20%; 
    float: left; 
    background-color: green; 
}

#fill {
    min-height: 100%; 
    overflow: hidden; 
    background-color: red; 
}

.clearfloat {
    clear: both; 
}

非常感谢 ！

Answer 1

如果您不需要支持旧版浏览器，您也可以使用 flexbox 布局。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://caniuse.com/flexbox

<div class="flex-container">
    <div id="left">
        The floating <br/>column
    </div>

    <div id="right">
        This one fill the rest
    </div>
</div>

和 CSS：

.flex-container {
  display: flex;
  flex-flow: row no-wrap;
  justify-content: space-around;
  background: yellow;
  width: 500px;
}

#left {
    width:20%;
    background-color: green; 
}

#right {
    width:80%;
    background-color: red; 
}

http://jsfiddle.net/gwwar/KFmVJ/1/

Answer 2

Jquery 解决方案，这里有一个Fiddle

$(function() {
  var fHgt = $('#float').outerHeight();

  $('#fill').css({ height: fHgt });
});

这是一个CSS解决方案

#container {
  display: table;
  width: 500px;
  background-color: yellow;
}
#float {
  display: table-cell;
  width: 20%;
  background-color: green; 
}
#fill {
  display: table-cell;
  width: 80%;
  overflow: hidden; 
  background-color: red; 
}