Html 如何将页脚扩展到页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9741701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can i extend a footer to bottom of page?
提问by Jai
i have a layout like this
我有这样的布局
<section id="container">
<header></header>
<section id="main"></section>
<footer></footer>
</section>
At the moment my page is laid out like this:
目前我的页面布局如下：
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
|-----------------|
| |
| |
-------------------
I would like the footer to extendfollowing the main content area to the bottom of the page, how can this be achieved?
我想让页脚跟随主要内容区域延伸到页面底部，如何实现？
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
| |
| |
| FOOTER |
-------------------
NOTE:I have noticed all answers so far will pin the footer to tje bottom of the page, however when dragged the footer simply moves down/the main container expands, I want the footer to expand.
注意：我已经注意到到目前为止所有的答案都会将页脚固定到页面底部，但是当拖动页脚时，页脚只是向下移动/主容器扩展，我希望页脚扩展。
回答by c4collins
I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:
我正在寻找这个确切问题的解决方案，我遇到了一种非常简单的方法来实现我想要的效果：
footer {
box-shadow: 0 50vh 0 50vh #000;
}
This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height's worth) of coverage to the space below the footer, so the body background doesn't appear below it.
这会创建一个阴影，如果不需要，它会从屏幕上掉下来，否则会给页脚下方的空间提供 100vh（一个完整的视口高度值）的覆盖，因此正文背景不会出现在它的下方。
回答by Tim Wickstrom
I would create the illusion that the footer extends to the bottom if possible.
如果可能的话，我会产生页脚延伸到底部的错觉。
Say footer background color is #000000;
假设页脚背景颜色是#000000；
Set the body background color to #000000
将正文背景颜色设置为 #000000
and make sure
并确保
spans 100% width.
跨越 100% 的宽度。
the color #00000 is for example purposes only you may need an image slice or the lat color used in a gradient etc...
颜色 #00000 仅用于示例目的，您可能需要图像切片或渐变中使用的纬度颜色等...
回答by Sam Straub
Although this is marked answered, it doesn't seem to fully answer the OPs question. I had the same challenge and here is what I found to work:
虽然这被标记为已回答，但它似乎并没有完全回答 OP 问题。我遇到了同样的挑战，这是我发现的工作：
- Set your HTML & Body to 100% height
- Ensure all of your content, including your footer is wrapped with a big div (site-container)
- Fiddle with the space in the footer.
- 将您的 HTML 和正文设置为 100% 高度
- 确保您的所有内容，包括页脚都用大 div（站点容器）包裹
- 摆弄页脚中的空间。
Here is the CSS:
这是CSS：
html, body{
height: 100%
}
.site-container{
overflow: hidden;
min-height: 100%;
min-width: 960px;
}
.footer{
padding-bottom: 32000px;
margin-bottom: -32000px;
}
I found this here: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/which contains more info.
我发现这个在这里：https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/这包含更多信息。
回答by Ryan
This should do the trick http://jsfiddle.net/fXf4K/
这应该可以解决问题http://jsfiddle.net/fXf4K/
回答by Andres Ilich
回答by w3uiguru
Try the below fiddle which is demonstrating the concept how to keep the footer at bottom always.
试试下面的小提琴，它演示了如何始终将页脚保持在底部的概念。
Fiddle: http://jsfiddle.net/evTb4/
小提琴：http: //jsfiddle.net/evTb4/
回答by Bill Citrine
I had the same problem and found this to work - so long as the footer is out on its own, i.e. not within a container div or anything.
我遇到了同样的问题，发现它可以工作 - 只要页脚是独立的，即不在容器 div 或任何东西内。
Basically, I needed my content to be fixed width and centred on a white background with a horizontally repeating background image in the body tag extending the full width of the browser window, providing a nice band beneath the header. I wanted the footer to be in a dark colour and extend to the bottom of the page regardless of the height of the content and browser window size.
基本上，我需要我的内容是固定宽度的，并以白色背景为中心，body 标签中的水平重复背景图像扩展了浏览器窗口的整个宽度，在标题下方提供了一个漂亮的带。我希望页脚采用深色并延伸到页面底部，而不管内容的高度和浏览器窗口的大小。
My page (very simply) was as follows:
我的页面（非常简单）如下：
<!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>
Then in the css include these rules (along with all the other styles):
然后在 css 中包含这些规则（以及所有其他样式）：
html, body {
height: 100%;
overflow: hidden;
}
footer {
height: 100%;
}
The hidden overflow removed the annoying scrollbar caused by the 100% html and body height compensating for the height of the container and extending beyond the browser window.
隐藏的溢出消除了由 100% html 和 body 高度补偿容器高度并延伸到浏览器窗口之外引起的恼人滚动条。
回答by thomaschall
Similar to @c4collins, you can use view height instead of a fixed pixel, in case someone has a huge monitor
与@c4collins 类似，您可以使用视图高度而不是固定像素，以防有人拥有巨大的显示器
footer{
box-shadow: 0 100vh 0 100vh #000000;
}
