列到达相同的底部，但没有相同的顶部

Question

我正在处理一个有点挑战的设计。

该网站需要使用粘性页脚和完整等长的列。我一直在用背景图片欺骗其他页面，但是我有一些麻烦的页面在左栏中有一个标题。

标题下方有一个间隙，显示背景图像，因此我降低背景图像是不可行的。

Here is a JSfiddle with a lot of the essential mark up in place. 我已经包含了粘性页脚，并在 CSS 中对其进行了分段，因为该解决方案必须与粘性页脚一起使用。

Answer 1

您可以为此使用Display:table 属性。像这样写：

#columns{
    width:90%;
    display:table;
}
.column{
    border: 1px dotted blue;
    display:table-cell;
}

查看http://jsfiddle.net/4rY8h/2/

但它不适用于 IE7 及以下版本。