Question

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

在这个小提琴中，我想让红色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; 
}

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

2 个答案: