边栏高度不随浮动内容扩大

问题描述：

我有一个父div与两个子div。其中一个div是侧边栏，另一个是内容区域。我试图让边栏在内容区域长于边栏时一直向下延伸。任何想法如何做到这一点？这里有一个fiddle说明问题。边栏高度不随浮动内容扩大

尝试：[http://stackoverflow.com/search?q=equal+height+columns](http://stackoverflow.com/search?q=equal+height+columns） –

答

你可以用一种叫做faux columns的技术来做到这一点。这个想法是，你应用背景#main-content。由于您的列都浮动，因此您还需要在#main-content末尾有一个清除元素，以使其扩展到两列的全部高度。

HTML：

<div id="main-content"> 
    <div id="side-bar"></div> 
    <div id="content-right"></div> 

    <div class="clear"></div> 
</div>

CSS：

#main-content { 
    background-color: #eee; 
} 

#content-right { 
    background-color: #fff; 
} 

.clear { 
    clear: both; 
}

以上使它看起来像你的#side-bar是内容列的全高度。