html - 页脚 float 到底部，很好。但是列呢

Question

我有这样的代码:

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

Container 允许我将页脚推到页面底部，但如果我想让左右栏跨越接触页脚的高度，这怎么办？

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

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

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