我有这样的布局
<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 |
-------------------
注意：我注意到到目前为止所有答案都会将页脚固定在页面底部，但是当拖动页脚只是向下移动/主容器展开时，我希望页脚展开。
我正在寻找这个确切问题的解决方案，我遇到了一种非常简单的方法来实现我想要的效果：
footer {
box-shadow: 0 50vh 0 50vh #000;
}
如果不需要，这会产生一个从屏幕上掉下来的阴影，否则会给页脚下方的空间提供100vh（一个完整的视口高度值）覆盖，因此身体背景不会出现在它下面。
如果可能的话，我会创造出页脚延伸到底部的错觉。
说页脚背景颜色是＃000000;
将正文背景颜色设置为＃000000
并确保
跨度100％宽度。
颜色＃00000仅用于示例目的，您可能需要图像切片或渐变等中使用的lat颜色...
虽然这标记得到了回答，但似乎并没有完全回答OP的问题。我遇到了同样的挑战，这就是我发现的工作：
这是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/包含更多信息。
这应该做的技巧http://jsfiddle.net/fXf4K/
您可以使用粘性页脚来实现这种效果，例如listed here，并将其应用到您的设计中，将页脚推到文档的底部，就像我在这个演示中所做的那样：
我有同样的问题，并发现这是有效的 - 只要页脚自己出来，即不在容器div或任何东西。
基本上，我需要将内容固定宽度并以白色背景为中心，在body标签中使用水平重复的背景图像，扩展浏览器窗口的整个宽度，在标题下方提供一个漂亮的带。无论内容的高度和浏览器窗口大小如何，我都希望页脚呈深色并延伸到页面底部。
我的页面（非常简单）如下：
http://jsfiddle.net/evTb4/embedded/result/
然后在css中包含这些规则（以及所有其他样式）：
<!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>
隐藏的溢出消除了由100％html和主体高度引起的恼人的滚动条，补偿了容器的高度并延伸到浏览器窗口之外。
与@ c4collins类似，您可以使用视图高度而不是固定像素，以防有人拥有一个巨大的监视器
html, body {
height: 100%;
overflow: hidden;
}
footer {
height: 100%;
}