Question

我有三个组件，一个#parent，其中有两个是#top和#bottom。

#parent不是固定大小。

#top有漂浮的孩子，没有固定的大小（孩子可以改变大小）。为了解决因浮动孩子而导致的身高，它使用了这个：

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

我希望#bottom占用父级的剩余高度，如果我像正常一样使用height:100%，则会使其溢出与#top的高度相同的大小。

我也看到人们使用overflow:none;，但这会使#bottom中的部分内容被切断。

如何让#bottom占用#parent中的剩余高度？

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

Answer 1

如果你浮动顶部元素然后使用height: 100%;这应解决问题：

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

现在这样做bottom实际上填充了parent，因为top已浮动。但bottom的内容被推出了浮动的top，使其显得好像bottom正在填充剩余的空间，它真正填满了整个parent 。希望你能理解这一点。哈哈