如何将侧边栏列中的 div 固定到底部？答案

【问题标题】：How can I pin a div in my sidebar column to the bottom?如何将侧边栏列中的 div 固定到底部？
【发布时间】：2010-05-21 10:10:02
【问题描述】：

我有一个简单的两列布局，底部有一个页脚。当侧边栏中的内容高于主栏中的内容时，一切看起来都很棒。但是当主列的高度大于侧边栏时，我需要侧边栏增长到与主列相同的高度和，以便将侧边栏中的最后一个<div> 固定到最底层。

这是我的示例代码：

http://jsfiddle.net/mqnML/1/

【问题讨论】：

标签： css layout

【解决方案1】：

侧边栏的高度与其内容一样高。 ~~fix~~ 规避的一种方法是将两列包装到另一个 div 中。因为您浮动列，所以以具有clear:both 的元素结尾（我在底部添加了该内联）。这样包装器将与最高 div 一样高（在本例中为左列）。然后可以将 pin-me-to-bottom div 定位在包装器的底部，而不是在右列内。将position:relative; 添加到包装器中，这样您就可以position:absolute; pin-me-to-bottom div。

结果：http://jsfiddle.net/7Mrgu/

【讨论】：

谢谢。唯一的问题是，当主列不是很高时，pin-me-to-bottom div 会覆盖它上面的侧边栏元素（因为它是绝对定位的）。有什么办法可以防止吗？
好的，我想出了我可以做的一件事——我可以在wrap_columns div 上设置min-height 以确保其他侧边栏元素可见......但这假设侧边栏没有大小变化不大。
您也可以在侧边栏添加padding-bottom 固定div的高度，使固定div覆盖空白区域。但你是对的，如果固定 div 的高度是可变的，那么这很棘手。在这种情况下，您需要左侧 1 列，右侧需要 2 列堆叠。但我认为你不能同时将 div 固定到按钮上，和强制它推动前一个 div up。至少不是没有一些 JavaScript 读取固定 div 的高度来计算右上 div 所需的底部填充/边距。