javascript - 将 Div 设置为在具有浮动子代的兄弟姐妹的父代中占据剩余高度

Question

我有三个组件， a#parent和 2 它的孩子#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？

编辑： 我做了一个 jFiddle 来显示问题。另外，我需要支持回到 IE 7。我愿意使用 Javascript/jQuery。

score 1 · Accepted Answer

如果您浮动顶部元素，那么使用height: 100%;它应该可以解决问题：

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

这样做bottom实际上是填充了全部内容parent，因为top它是浮动的。但是的内容bottom被推开，top使它看起来好像bottom在填充剩余的空间，实际上是在填充整个parent. 希望你能理解这一点。哈哈

1 回答 1