Question

这是我想要完成的事情

<div style="width:700px;border: thin solid black">
<div style="float:left;">
    <div style="border: thin solid green;width:400px;height:50px"></div>
    <div style="border: thin solid green;width:400px;height:50px"></div>
    <div style="border: thin solid green;width:400px;height:50px"></div>
</div>
<div style="float:left;">
    <div style="border: thin solid red;width:250px;height:100% "></div>
</div>
<div style="clear: both;"></div>
</div>

红色div的高度应该扩大。

我想要一个div扩展到其父级高度的100％。因为在运行时不会知道大小。

我做错了什么？

Answer 1

好的，我让它与一些花哨的CSS一起工作。 http://jsfiddle.net/fA2v8/7/

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    position: relative;
}
.left {
    width: 400px;
    float: left;
    border: solid thin blue;
}
.right-wrapper {
    width: 20px;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
    border: solid thin red;
}
.clear {
    clear: both;
    height: 0;
}
<div class="container">
    <div class="left">
        <div style="border: thin solid green;width:400px;height:50px"></div>
        <div style="border: thin solid green;width:400px;height:50px"></div>
        <div style="border: thin solid green;width:400px;height:50px"></div>
    </div>
  <div class="right-wrapper">
    <div class="right">test2</div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

Answer 2

我认为如果你想让你的red-div扩展到父DIV的100％，那么父DIV必须有＆＃34; height＆＃34;设置：

<div style="float:left; height:120px;">
<div style="border: thin solid red;width:250px;height:100% "></div>
</div>

类似的......

Answer 3

如果可以，您也可以使用jQuery。 - FIDDLE。

JS

$('.rightdiv').css('height', $('.bigdiv').innerHeight());

css：如何将左浮动div增加到100％

3 个答案: