HTML:使所有 3 列高度相等(自动调整大小)

Question

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

主列有意列在 html 中的第一个，以确保从 SEO 的 Angular 来看，它的内容具有最佳可能的位置。

目前的代码有以下两个缺陷:

1. 每个div只要它的内容需要那么长，因此可以看出，如果使用背景颜色，它们是不等长的。
2. 如果页面很短(例如，“谢谢。您的消息已发送”)，那么页脚会在页面的一半处结束，我宁愿它出现在视口(viewport)的底部在这个实例中，左右 div 被扩展以保持一致性。

我还创建了一个 jsfiddle here但为了完整起见，下面是初始代码。

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；对于页脚。