html - HTML: 3 列すべてを同じ高さにする (自動サイズ変更)

Question

以下は、ヘッダーとフッターの div を含む 3 列の Web レイアウト テンプレートです。

プライマリ列は、SEO の観点からコンテンツが可能な限り最適な配置になるように、意図的に html の最初にリストされています。

現在のコードには、次の 2 つの欠陥があります。

1. 各 div は、そのコンテンツが必要とする長さだけであるため、背景色が使用されている場合、それらの長さが等しくないことがわかります。
2. ページが短い場合 (たとえば、「ありがとうございます。あなたのメッセージが送信されました」)、フッターはページの途中で終わります。一貫性を維持するために左右の div が拡張されています。

ここでjsfiddleも作成しましたが、完全を期すために最初のコードを以下に示します。

HTML:

<div class='layout'>
    <div class="header">
        domain.com
    </div>

    <div class="content">
        <div class="wrap">
            <div class="primary">
                Primary Content (centre column)
            </div>
            <div class="left-col">
                Left hand content
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
            </div>
        </div>
        <div class="right-col">
            Right hand content
        </div>
    </div>

    <div class="footer">
        <strong>&copy; All rights reserved</strong>
    </div>
</div>

CSS:

.layout {
    width: 90%;
    margin-left: 5%;
}

.header, .footer {
    border: 1px solid #999;
}

.footer {
    clear: both;
}

.primary {
    background: #FBA95E;
}

.left-col {
    background-color: #B9B9FF;
}

.right-col {
    background-color: #B9B9FF;
}

.header, .footer, .primary, .left-col, .right-col {
    padding: 10px 2%;
    margin: 5px 0;
}

.content {
    padding: 0;
    overflow: hidden;
}

.primary, .left-col, .right-col {
    margin-top: 0;
}

.wrap {
    float: left;
    width: 78%;
}

.primary {
    float: right;
    width: 65%;
    margin-left: 2%;
}

.left-col {
    float: left;
    width: 25%;
    text-align: center;
}

.right-col {
    float: right;
    width: 16.5%;
}

上記の2つの問題をどのように克服できますか？

Answer 1

position:absolute; を使用できます。下:0; フッター用。