如何调整 div 容器大小以适应子 div 的溢出

Question

我有一个包含子div的父级div容器：

<div id=mainWrapper>
    <div id=child>
    </div>
<div>

 #mainwrapper height:100%, width:900px
 #child height:100%, width:50% overflow:visible float:right

子div包含一系列元素。

当子div的溢出内容大于主要wrapper的高度时，如何调整主要wrapper的大小？

我尝试了很多css和一些脚本：$('#mainWrapper').css('height',$('#child').height());

但仍然不起作用。

- A H

Answer 1

在#child关闭后使用clearfix。浮动的div需要清除，以使它们的父div高度相同。

 <div id=mainWrapper>
     <div id=child>
     </div>
     <div style='clear:both;'><!--clear--></div> 
  <div>

  #mainwrapper height:100%, width:900px  
  #child height:100%, width:50% overflow:visible float:right

参考资料： http://www.webtoolkit.info/css-clearfix.html 哪种清除浮动方法最好？ http://css-tricks.com/snippets/css/clear-fix/

- totallyNotLizards

---

我在这个修复中遇到了问题。 我将mainwrapper的类设置为clearfix。然后我在我的CSS文件中添加了.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }， 但它没有起作用。顺便说一下，我的mainWrapper有两个子div。一个是向右浮动，另一个是向左浮动。只有向右浮动的子元素具有overflow:visible，并且导致了问题。 - A H

好的，你已经稍微了解了一下清除浮动（clearfix）了吗？不幸的是，并非所有的清除浮动方法都适用于所有情况。一般来说，你需要在浮动内容后面清除两侧，但在关闭父元素之前 - 这就是为什么我通常发现 <br style='clear:both;'/> 或类似的方法最有效。所以尝试在第二个子元素后面但在关闭父元素之前添加它，看看是否有帮助。 - totallyNotLizards

Answer 2

在mainwrapper上设置overflow: auto：

#mainwrapper {
    width:900px
    overflow: auto;  
}

当使用浮动时，这是关于hasLayout的问题。

- Damien Overeem

---

但我不想要overflow:auto。我希望子元素使用overflow:visible，并且希望主包装器调整其高度以适应溢出。 - A H

这实际上是它的作用...除非子元素超过900像素宽度，否则您不会得到滚动条。但需要删除其高度，否则也会出现滚动条。您真的尝试过这个选项吗？ - Damien Overeem

Answer 3

_{写成新答案，因为评论很容易被忽视。感谢Damien Overeem的贡献。}

为了实现子元素的overflow:visible和mainwrapper调整大小以适应溢出的高度，请从子元素和mainwrapper中删除height属性。
在mainwrapper中，设置overflow:auto。

- lucidbrot