浮动vs绝对定位难题

Question

我最近在asked a question上询问如何将侧边栏的高度设置为等于此homepage上的容器。

基本上，我有两个侧边栏，其中一个包含一个手风琴。当你点击某些按钮(在本例中是"Services“按钮)时，手风琴就会打开并导致侧边栏的增长。这就是我想要的，然而，侧边栏的高度不会粘在容器的底部。

为了解决这个问题，我通常会将侧边栏绝对定位在容器的顶部和底部。这样做的问题是，当accordion展开(单击时)时，它将重叠在侧边栏的底部。

我需要一个解决方案，随着他手风琴的增长，侧边栏将与它一起增长。解决方案还必须让侧边栏等于容器的完整高度。欢迎使用纯CSS或Jquery！

Answer 1

我通常通过在我的主内容容器上设置一个背景图像来解决这个问题。有关侧边栏和内容区域的示例，请参阅https://lisaleslie9.com/。

我会有一个容器div，一个主要内容的div，和一个旁注。

例如：

<div class="container">
    <div class="main-content">

    </div>

    <aside>
      // Your accordion here
    </aside>

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

</div><!-- end container -->

.clear {clear:both;}

并且使背景在包括背景图像的容器区域上重复-y。

我将在两个内部div下面做一个清晰的div来推动高度。

不确定您的布局设计。但我想这可能就是你要找的。