如何拉伸父div适合儿童div？

Question

如何拉伸父div适合儿童div？

我试图添加元素clear: both;内容后，但它不适合我。

HTML：

<div id="wrapper"> 
    <div class="left-menu"> 
    </div> 
    <div class="right-bar"> 
     <div class="right-content"> 
      <div class="content"> 
       <div class="content-wrapper"> 
        <div class="content-body"> 
         Here is content 
        </div 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.left-menu { 
    background-color: #0B0C0E; 
    width: 20%; 
    height: 100%; 
    float: left; 
} 
.right-bar { 
    background-color: #F0F0F0; 
    height: 100%; 
    width: 100%; 
} 
.right-content { 
    float: left; 
    width: 80%; 
} 
.right-content > .content { 
    padding: 21px 0 0 42px; 
} 
.right-content > .content > .content-wrapper { 
    width: 98%; 
    height: 70%; 
} 
.right-content > .content .content-body { 
    background-color: #FAFAFA; 
    padding: 20px; 
    font-size: 24px; 
    border: 1px solid #D0D0D0; 
} 

沙盒测试：http://roonce.com/en/room/SwZuEJYB

在此先感谢。

Answer 1

使用“清除修复”技术。 http://css-tricks.com/snippets/css/clear-fix/

这将允许父div是适当大小的浮动元素内。请注意，这个特别适用于#wrapper。 （http://jsbin.com/huqehuta/1/edit）

.clear-fix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}