让绝对定位的区域增长答案

【问题标题】：letting absoltuely positioned area grow让绝对定位的区域增长
【发布时间】：2011-01-09 03:57:21
【问题描述】：

请参阅此页面以供参考：test page

我正在设计一个站点，该站点的侧边栏包含手风琴风格的垂直导航栏。包含此手风琴的侧边栏相对于容纳它的容器是绝对定位的。我这样做是为了让侧边栏保持在顶部、底部和侧面的粘性。

当您单击产品按钮时，手风琴展开远远超过容器，溢出到页脚。如果我将侧边栏浮动到左侧，它会变大以容纳整个侧边栏，但默认情况下它不会粘在容器底部。

我需要一个允许侧边栏绝对定位的解决方案，并在手风琴展开时允许增长。有任何想法吗？也许是 Jquery 解决方案？

【问题讨论】：

【解决方案1】：

我不明白为什么你不能使用浮点数。

粘到底是什么意思？

编辑

因为您使用绝对定位，所以现在可以扩展容器，因为菜单不再处于流程中。（好吧，你可以使用 JavaScript），但我真的没有看到问题。

【讨论】：

【解决方案2】：

虽然问题是如何使绝对定位的区域增长，但答案是不使用 javascript 就无法实现。

经过一些研究，似乎很多人都陷入了同样的境地：“如何让右栏（侧边栏）一直延伸到页面下方？”

答案是使用 Faux Columns！

【讨论】：

【解决方案3】：

如果您将它向左浮动并且绝对定位它，它应该会自动展开。

【讨论】：

【解决方案4】：

我发现在包含的 div 上设置 overflow: hidden; 通常会产生奇迹。由于您告诉内容隐藏，浏览器会不隐藏它（除非您设置了高度或最大高度）。这通常在容器有浮动等时效果很好。无需向clear: both; 等添加 div。

试试这个...

编辑：我一直在玩这个，但我无法让它在您的网站上运行。你能在菜单和主区域左边浮动，然后将容器设置为overflow: hidden;吗？这就是我过去使用的。

【讨论】：

【解决方案5】：

一个 jQuery 解决方案应该可以使用类似这样的东西连接到导航链接的点击侦听器：

$('#leftbar').height( $('#leftbar')[0].scrollHeight );
$('#container').height( $('#container')[0].scrollHeight );

它应该基本上调整栏和容器的大小以包含它们的内容。您可能想要调整几个像素或其他东西，但这就是我们的想法。

编辑：这可能会因为手风琴不会立即展开整个子菜单而变得复杂，可能必须将其放在调整大小循环中的某个地方，或者如果存在瞬时差异，则只需在动画结束时执行此操作你没事吧。

【讨论】：