如何拉伸父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; 
}