html - 同じ上部がなく、同じ下部に到達する列

Question

ちょっと難しいデザインを扱っています。

このサイトでは、スティッキーフッターと完全な同じ長さの列を使用する必要があります。他のページを背景画像でだましてきましたが、左の列にヘッダーがある厄介なページがいくつかあります。

ヘッダーの下に背景画像が表示されるギャップがあるため、背景画像を下に移動することはできません。

これは、多くの重要なマークアップが配置されたJSfiddleです。ソリューションがスティッキーフッターで機能することが不可欠であるため、スティッキーフッターを含め、CSSでセクション化しました。

Answer 1

Display:tableこれにはプロパティを使用できます。このように書いてください：

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

これをチェックしてくださいhttp://jsfiddle.net/4rY8h/2/

ただし、IE7以下では動作しません。