如何避免浮动元素和高度div div

Question

演示：https://jsfiddle.net/e04wfxj6/

边栏需要保持在100px，因为它是。 内容似乎围绕侧边栏和第一个.row采取边栏的高度。 我试图摆脱包装。

#sidebar { 
 
    background: tomato; 
 
    width: 100px; 
 
    float: left; 
 
} 
 
#sidebar ul { 
 
    padding-left: 0; 
 
} 
 
#sidebar ul li { 
 
    list-style: none; 
 
} 
 
#content { 
 
    background: beige; 
 
    margin-left: 100px; 
 
} 
 
#content .row { 
 
    background: brown; 
 
} 
 
#content .row > div { 
 
    background: red; 
 
}

<div id="sidebar"> 
 
    <ul> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    </ul> 
 
</div> 
 
<div id="content"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3">3</div> 
 
     <div class="col-xs-4">4</div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3">3</div> 
 
    <div class="col-xs-4">4</div> 
 
    </div> 
 
</div>

Answer 1

Fiddle.

变化.container-fluid元件包装位置。因为您使用引导程序来构建网格布局。因此，.container-fluid应该包装所有的页面元素。

Answer 2

将overflow:hidden加到#content。 https://jsfiddle.net/kd4z0vyy/