css - 如何调整 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 包含元素列表。

当子级溢出大于 mainWrapper 的高度时，如何调整 mainWrapper 的大小？

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

没有任何工作。

Answer 1

在#child. 浮动 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

我可以使用哪些“clearfix”方法？

http://css-tricks.com/snippets/css/clear-fix/

Answer 2

在 mainwrapper 上设置溢出：自动：

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

使用浮动时，它是 hasLayout 的事情。

Answer 3

_{写为新答案，因为评论很容易被忽略。Damien Overeem的学分}

为了实现overflow:visible为孩子和mainwrapper调整溢出的高度，height从孩子和mainwrapper.
在mainwrapper，设置overflow: auto。