页脚浮到底部，很好。但是列呢

发布于 2024-10-18 22:45:01 字数 294 浏览 3 评论 0原文

我有这样的代码：

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

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

原文

I have code as such:

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

Container allows me to push the footer to the bottom of the page, but if I want the left and right column to span the height touching the footer, how can this be done?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怂人 2024-10-25 22:45:01

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

完整的 CSS（包括您自己的 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/

You will need to set your page's html and body elements to 100% height. Then your columns will fill the page height if you also set them to 100%.

The full CSS (including your own) is as follows. Background colour is used to illustrate layout.

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

By setting padding to zero on the body you remove a horizontal scroll when the page is empty. Also be aware that by using absolute positioning for your footer it will overlap the content of the content columns.

Here is a fiddle illustrating the layout - http://jsfiddle.net/BuKcH/

回复收藏 0 原文

~没有更多了~