html - 侧边栏高度不随 float 内容扩展

Question

我有一个带有两个子 div 的父 div。其中一个 div 是侧边栏，另一个是内容区域。当内容区域比侧边栏长时，我试图让侧边栏一直向下延伸。知道怎么做吗？这是一个 fiddle说明问题。

Answer 1

您可以使用一种称为 faux columns 的技术来做到这一点.这个想法是您将背景应用到 #main-content。由于您的列都是 float 的，您还需要在 #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 是内容栏的完整高度。

这是 your fiddle updated.