如何将页脚扩展到页面底部？

Question

我有这样的布局

<section id="container">
    <header></header>
    <section id="main"></section>
    <footer></footer>
</section>

目前我的网页布局如下:

-------------------
|                 | 100px height
|  HEADER         |
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|-----------------|
|                 |
|                 |
-------------------

我希望页脚跟随主要内容区域延伸到页面底部,如何实现？

-------------------
|                 | 100px height
|  HEADER         | 
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|                 |
|                 |
|  FOOTER         |
-------------------

注意:我注意到到目前为止所有答案都会将页脚固定在页面底部,但是当拖动页脚只是向下移动/主容器展开时,我希望页脚展开.

Answer 1

我正在寻找这个确切问题的解决方案,我遇到了一种非常简单的方法来实现我想要的效果:

footer {
    box-shadow: 0 50vh 0 50vh #000;
}

如果不需要,这会产生一个从屏幕上掉下来的阴影,否则会给页脚下方的空间提供100vh(一个完整的视口高度值)覆盖,因此身体背景不会出现在它下面.

Answer 2

如果可能的话,我会创造出页脚延伸到底部的错觉.

说页脚背景颜色是#000000;

将正文背景颜色设置为#000000

并确保

跨度100%宽度.

颜色#00000仅用于示例目的,您可能需要图像切片或渐变等中使用的lat颜色...

Answer 3

虽然这标记得到了回答,但似乎并没有完全回答OP的问题.我遇到了同样的挑战,这就是我发现的工作:

1. 将HTML和正文设置为100%高度
2. 确保您的所有内容,包括您的页脚都包含一个大div(站点容器)
3. 摆弄页脚中的空间.

这是CSS:

html, body{
    height: 100%
}

.site-container{
    overflow: hidden;
    min-height: 100%;
    min-width: 960px;
}

.footer{
    padding-bottom: 32000px;
    margin-bottom: -32000px;
 }

我发现这个在这里:https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/这包含更多信息.