页脚浮动到底部，很好。但是列呢？答案

【问题标题】：Footer floating to the bottom, good. But what about columns页脚浮动到底部，很好。但是列呢？
【发布时间】：2023-03-21 00:58:01
【问题描述】：

我有这样的代码：

<div id="container">
    <div id="left-column">Floating left.</div>
    <div id="right-column">Floating right.</div>
</div>
<div id="footer">BlahBlah</div>

容器允许我将页脚推到页面底部，但是如果我希望左右列跨越与页脚接触的高度，该怎么做？

【问题讨论】：

一旦您接受了一些答案（您之前提出的问题上的勾号），请尝试将您的代码添加到 jsfiddle.net 以供我们使用

标签： html css css-float footer

【解决方案1】：

您需要将页面的 html 和 body 元素设置为 100% 的高度。如果您也将它们设置为 100%，那么您的列将填充页面高度。

完整的 CSS（包括您自己的）如下。背景颜色用于说明布局。

html, body {
    height:100%;
    padding:0;
}

#container {
    width:100%;
    height:100%;
    position:relative;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #FC0;
}

#left-column {
    background-color: #666;
    width :50%;
    float: left;
    height: 100%;
}

#right-column {
    background-color: #CCC;
    width: 50%;
    float: right;
    height: 100%;
}

通过将主体上的填充设置为零，您可以在页面为空时移除水平滚动。另请注意，通过对页脚使用绝对定位，它将与内容列的内容重叠。

这是一个说明布局的小提琴 - http://jsfiddle.net/BuKcH/

【讨论】：