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

我有这样如何将页脚扩展到页面底部？

<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   | 
-------------------

注：我注意到所有的答案，当拖着页脚只是向下移动，迄今将针页脚TJE页面的底部，但是/主容器膨胀，我想页脚扩大。

来源

2012-03-16 Jai

什么是你的页脚CSS？ – j08691 2012-03-16 17:20:18

目前它的正好宽度：100％;高度：300像素;显示：块;背景：＃000; – Jai 2012-03-16 17:21:54

我thinkl这个回答你的问题： http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom – Liam 2012-03-16 17:22:11

103

我正在寻找解决这一确切的问题，我碰到达到效果的一个非常简单的方法来我正想为：

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

这将创建一个阴影，将脱落的画面，如果不需要，但否则会给页脚下方的空间提供100vh（完整的视窗高度值）覆盖范围，因此身体背景不会显示在其下方。

来源

2013-09-21 16:59:37 c4collins

我在身体上有一个很大的背景图像和一个部分透明的页脚，所以没有其他答案可以工作。这工作完美！ – Peter 2014-04-15 20:42:56

与@peter相同 - 在较短的页面或较高的分辨率下在身体上有一个背景图像并且有一个断脚。这是修复。 – lewsid 2014-09-06 11:31:19

我也不得不添加'body {height：100％; ''这个工作，但很好的解决方案。 – Novocaine 2015-11-05 10:05:09

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

说的页脚背景颜色是＃000000;

定身的背景颜色为＃000000

，并确保

覆盖了100％的宽度。

颜色＃00000是例如仅供您可能需要的图像切片或渐变等使用LAT颜色...

来源

2012-03-16 17:22:32

这，**是**我试图实现的效果，但它并没有真正扩展页脚，这是我想如何实现它。 +1 – Jai 2012-03-17 14:34:09

如果您希望页脚具有动态高度，则可以这样做。如果它是一个固定的高度，我会使用上面的答案之一或使用JavaScript来嗅出准备好的事件和调整事件来计算身高！希望这可以帮助！ – 2012-03-19 16:45:04

这应该做的伎俩http://jsfiddle.net/fXf4K/

来源

2012-03-16 17:28:55 Ryan

这个**，**是我想要实现的，但它不是一个真正延长页脚，这是我怎么想完成它的效果。 +1 – Jai 2012-03-17 14:33:46

你能举个例子说明你究竟想做什么？如果你只是给页脚一个固定的高度呢？ – Ryan 2012-03-17 18:12:02

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

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

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

来源

2012-03-16 17:29:59 w3uiguru

感谢，但并没有真正回答这个问题，我不想页脚坚持下，我想它来扩展它的高度。 – Jai 2012-03-17 14:32:17

您可以使用粘滞页脚达到这样的效果，像一个listed here，并将其应用到您的设计，您的页脚推到文档的底部，就像我在这个演示中所示：

Demo，编辑here。

来源

2012-03-16 20:39:09

虽然这被标记为回答，但它似乎没有完全回答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/其中包含更多的信息。

来源

2013-04-20 22:39:15

工作示例：https：// jsfiddle。net/vtva2wyu/ – 2016-02-19 10:00:48

我有同样的问题，发现这个工作 - 只要页脚是出于自身，即不内的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和body height引起，可补偿容器的高度，并延伸到浏览器窗口之外。

来源

2013-05-09 18:56:07

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

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

来源

2017-09-30 00:47:13 thomaschall

你应该参考你所指的答案的人的名字，因为你的意思不是直接明白你的意思。 – Jaquez 2017-09-30 01:39:57

这不提供问题的答案。一旦你有足够的[声誉]（https://stackoverflow.com/help/whats-reputation），你将可以[对任何帖子发表评论]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提问者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [来自评论]（/ review/low-quality-posts/17488858） – Styx 2017-09-30 04:05:15

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

回答

相关问题