Javascript 将Div设置为在具有浮动子级的同级的父级中占据剩余高度

我有三个组件，一个

#parent

，它的两个子组件

#top

和

#bottom

父项的大小不是固定的

#top

具有浮动的子项，并且没有固定的大小（它的子项可以更改大小）。为了固定浮动子对象的高度，它使用以下方法：

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

我希望

#bottom

占据父级中的剩余高度，如果我像正常情况一样使用

height:100%

，它将溢出与

#top

高度相同的大小

我还看到人们使用

overflow:none

但这会使我在

#bottom

中的一些内容被切断

如何使

#bottom

占据

#parent

中的剩余高度

---

编辑：。另外，我需要支持回到IE7。我愿意使用Javascript/jQuery。

如果浮动顶部元素，则使用

高度：100%这应该可以解决问题：

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

见：

它现在所做的是
bottom
实际上填充了整个
parent
，因为
top
是浮动的。但是
bottom
的内容被推到了浮动的
top
之外，使它看起来好像
bottom
正在填充剩余的空间，在那里它实际上填充了整个
父项。希望你能理解这一点。哈哈
不幸的是，我需要支持IE 7，我们需要实际的代码来重现问题（标记在哪里？）。IE7支持将真正限制（或可能消除）您的选择我将为其制作一个JSFIDLE为什么您首先需要有
#bottom
？既然
#bottom
将填充
#parent
，你能不能把
#bottom
的子项放在
#parent
中，并去掉多余的容器？@slitlycuban我相信有很多理由让你在这里需要另一个div，而不仅仅是使用parent。这是一个抽象的问题，使它更容易处理，我相信。我不知道为什么这是有效的，但jFiddle不会说谎。谢谢我将为您添加一个描述：）