Question

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

Answer 1

您可以使用名为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是内容列的完整高度。