浮动与绝对定位难题答案

【问题标题】：floating vs absolutely positioning conundrum浮动与绝对定位难题
【发布时间】：2012-06-13 01:05:13
【问题描述】：

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

基本上，我有两个侧边栏，其中一个包含手风琴。当您单击某些按钮时（在本例中为“服务”按钮，手风琴打开并导致侧边栏增长。这就是我想要的，但是，侧边栏的高度不会粘在容器的底部。

为了解决这个问题，我通常会将侧边栏绝对放置在容器的顶部和底部。这样做的问题是，当手风琴展开时（点击时），它将重叠在侧边栏的底部。

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

【问题讨论】：

JCHASE：你应该在下面回答你自己的问题，这样问题就结束了。
我重新问了这个问题。请忽略最后的评论。帮助！
我把它切换到绝对定位

标签： jquery css css-float css-position

【解决方案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;}

并在包含背景图像的容器区域上重复背景。

我会在两个内部div下做一个clear div来推高。

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

【讨论】：

刚刚意识到您有两个侧边栏。您还可以在顶部侧边栏 div 下放置一个清晰的 div（如果它们是浮动的），以便在高度扩展时向下推第二个侧边栏。