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（一个完整的视口高度值）覆盖，因此身体背景不会出现在它下面。 / p>

Answer 2

如果可能的话，我会创建一个页脚延伸到底部的错觉。

说页脚背景颜色为＃000000;

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

并确保

横跨100％宽度。

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

Answer 3

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

设置HTML＆amp;身体到100％的高度
确保您的所有内容（包括您的页脚都包含大型div（网站容器）
摆弄页脚中的空间。

这是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/其中包含更多信息。

Answer 4

这应该是技巧http://jsfiddle.net/fXf4K/

Answer 5

您可以使用粘性页脚来实现这种效果，例如listed here，并将其应用到您的设计中，将页脚推到文档的底部，就像我提出的演示一样：

Demo，修改here。

Answer 6

尝试下面的小提琴，它展示了如何始终将页脚保持在底部的概念。

小提琴：http://jsfiddle.net/evTb4/

演示：http://jsfiddle.net/evTb4/embedded/result/

Answer 7

我遇到了同样的问题，发现这个问题有效 - 只要页脚不在自己的位置，即不在容器div或任何东西内。

基本上，我需要将我的内容固定宽度并以白色背景为中心，在body标签中使用水平重复的背景图像，扩展浏览器窗口的整个宽度，在标题下方提供一个漂亮的带。无论内容的高度和浏览器窗口大小如何，我都希望页脚呈深色并延伸到页面底部。

我的页面（非常简单）如下：

<!DOCTYPE HTML>
<html>
<head>usual stuff</head>
<body>
<div id="container">
<header>fixed height and containing various stuff</header>
<div id="sidebar">floated left and containing nav</div>
<div id="content">floated left and containing various stuff</div>
<div class="clearfloat"></div>
<!-- end container --></div>
<footer>various stuff, address etc.</footer>
</body>
</html>

然后在css中包含这些规则（以及所有其他样式）：

html, body {
    height: 100%;
    overflow: hidden;
}

    footer {
    height: 100%;
}

隐藏的溢出消除了由100％html和主体高度引起的恼人滚动条，补偿了容器的高度并延伸到浏览器窗口之外。

Answer 8

与@ c4collins相似，您可以使用视图高度而不是固定像素，以防有人拥有一个巨大的显示器

footer{
  box-shadow: 0 100vh 0 100vh #000000;
}

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

8 个答案: