html如何加页脚,html-如何将页脚扩展到页面底部？

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

我有这样的布局

目前，我的页面布局如下：

-------------------

| | 100px height

| HEADER |

|-----------------|

| |

| MAIN | 500px height

| |

|-----------------|

| |

| FOOTER |

|-----------------|

| |

| |

-------------------

我希望页脚沿着主要内容区域扩展到页面底部，这如何实现？

-------------------

| | 100px height

| HEADER |

|-----------------|

| |

| MAIN | 500px height

| |

|-----------------|

| |

| FOOTER |

| |

| |

| FOOTER |

-------------------

注意：到目前为止，我已经注意到所有答案都将页脚固定在页面底部，但是当拖动页脚仅向下移动/主容器扩展时，我希望页脚扩展。

Jai asked 2020-07-18T17:57:17Z

8个解决方案

130 votes

我正在寻找解决这个确切问题的方法，并且遇到了一种非常简单的方法来达到我想要的效果：

footer {

box-shadow: 0 50vh 0 50vh #000;

}

这样会创建一个阴影，如果不需要，该阴影会从屏幕上掉落，否则将为页脚下方的空间提供100vh(相当于整个视口高度的覆盖率)的覆盖率，因此主体背景不会出现在其下方。

c4collins answered 2020-07-18T17:57:35Z

6 votes

如果可能的话，我会产生页脚延伸到底部的错觉。

假设页脚背景色为＃000000；

将主体背景色设置为＃000000

并确保

跨越100％的宽度。

颜色＃00000仅出于示例目的，您可能需要图像切片或渐变中使用的经纬度等。

Tim Wickstrom answered 2020-07-18T17:58:17Z

6 votes

尽管已标记为已回答，但似乎无法完全回答OP的问题。 我遇到了同样的挑战，这就是我发现可以工作的地方：

将您的HTML和正文设置为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/ ]，其中包含更多信息。

Sam Straub answered 2020-07-18T17:58:59Z

4 votes

这应该可以解决问题[http://jsfiddle.net/fXf4K/]

Ryan answered 2020-07-18T17:59:19Z

2 votes

您可以使用粘性页脚来实现该效果(如此处列出的效果)，并将其应用于您的设计中以将页脚推到文档的底部，如我在此演示中所展示的：

演示，在这里编辑。

Andres Ilich answered 2020-07-18T17:59:44Z

1 votes

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

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

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

w3uiguru answered 2020-07-18T18:00:12Z

1 votes

我遇到了同样的问题，并发现它可以正常工作-只要页脚单独显示，即不在容器div或其他任何内容中。

基本上，我需要将内容固定为宽度，并以白色背景为中心，并在body标签中水平重复背景图像，以扩展浏览器窗口的整个宽度，并在标题下方提供一个漂亮的区域。 我希望页脚为深色并扩展到页面底部，而不考虑内容的高度和浏览器窗口的大小。

我的页面(非常简单)如下：

fixed height and containing various stuff

floated left and containing nav

floated left and containing various stuff

various stuff, address etc.

然后在css中包括以下规则(以及所有其他样式)：

html, body {

height: 100%;

overflow: hidden;

}

footer {

height: 100%;

}

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

Bill Citrine answered 2020-07-18T18:00:50Z

0 votes

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

footer{

box-shadow: 0 100vh 0 100vh #000000;

}

thomaschall answered 2020-07-18T18:01:11Z