html - HTML：使所有 3 列等高（自动调整大小）

Question

以下是一个 3 列 Web 布局模板，带有页眉和页脚 div。

主列有意在 html 中列在首位，以确保其内容从 SEO 的角度来看具有最佳位置。

当前代码有以下两个缺陷：

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%;
}

请问我怎样才能克服上面提到的两个问题？

Answer 1

你可以使用 position:absolute; 底部：0；为页脚。