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

Question

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

这是我的示例代码:

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

Answer 1

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

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