javascript - 将 Div 设置为占用父级的剩余高度，其中的 sibling 有 float 的子级

Question

我有三个组件，一个 #parent , 和它的两个 child #top和 #bottom .

#parent不是固定大小。

#top有 float 的 child ，没有固定的大小( child 可以改变大小)。为了修复 float child 的高度，它使用这个:

#top:after { 
   content: " ";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

我要#bottom占据 parent 的剩余高度，如果我使用 height:100%像正常一样，它使它溢出与 #top 相同的大小的高度。

我也看到人们使用 overflow:none;但这使我的一些内容成为 #bottom被切断。

我怎样才能制作#bottom占据#parent中的剩余高度？

编辑: I made a jFiddle to show the problem .另外，我需要支持回到 IE 7。我愿意使用 Javascript/jQuery。

Answer 1

如果您 float 顶部元素然后使用 height: 100%; 这应该可以解决问题:

#top{
    background-color: blue;
    width:100%;
    float:left;
}

参见:http://jsfiddle.net/SKkAp/1/

现在 bottom 实际上填充了整个 parent，因为 top 是 float 的。但是 bottom 的内容被推出了 float 的 top 的方式，使得它看起来好像 bottom 正在填充剩余的空间，它是真正填满了整个 parent。希望你能理解这一点。哈哈