Html 让页脚保持在页面底部

可能重复：

（链接至网站：）

请使用以上链接和浏览器开发工具查看html/css

我试图让页脚保持在页面底部。它可能看起来像是掉下来了，但那只是因为它适合这一页。例如，如果您转到/404.html，您将看到它是一个没有页眉的页面，页脚几乎位于页面的一半！我使用Weebly添加内容等，但我使用Dreamweaver来构建网站。我在网上尝试了多种方法，但它们似乎使页脚超出了实际内容，使您无法看到它。我需要它在内容下面

网站布局如下（示例）：

您可以看到页脚位于单独的容器中。这是因为有一个背景图像需要显示100%的页面宽度，而容器的宽度是960px

我对html/css有点陌生，如果您不太理解，很抱歉

同样，如果您需要任何帮助，请使用浏览器中的开发人员工具：P

---

任何评论、建议和答案都将不胜感激。

编辑

<div id="wrapper">
  <header></header>
  <div id="main"></div>
  <footer></footer>
</div>

body, html, #wrapper { height: 100%;  } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header, 
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */

body，html，#wrapper{height:100%；}/*为元素创建100%的空间*/
#包装器{display:table；}/*创建一个表结构*/
#包装器>*{display:table row；}/*所有直接子级都表现为行*/
#包装器>标题，
#包装器>页脚{最小高度：100px；}/*这些必须至少为100px*/
#主{高度：100%；}/*让中间部分填满剩余空间*/

只需添加到

#页脚容器

position:absolute;
bottom:0px;

---

将

页脚

放在页面底部。

我必须否决这一点，因为有大量的教程和资料介绍如何在网上完成这一点。好吗？我确实相信我说过我经历了一系列的教程，但它们都不起作用。其中一半是放在页面底部，另一半是各种各样的东西。我是html/css新手..没有？不是复制品吗？一个完全不同的东西，我正在使用/做。我试过了，它把页脚放在页面的中间。下面是我用来查看是否有任何错误会导致这种情况的代码。{font-family:Verdana，Geneva，sans-serif；text-align:center；height:auto；margin-right:auto；margin-left:auto；vertical-align:bottom；top:auto；color:#FFF；bottom:0；position:absolute；background:url（footer\u-bg.png）无重复中心底部；宽度：100%；}#页脚{高度：90px；宽度：960px；文本对齐：中心；右边距：自动；左边距：自动；字体系列：verdana；颜色：#fff；}#页脚a{颜色：#fff；文本装饰：无；}#页脚a：悬停{颜色：#fff；文本装饰：下划线；}我只放了那两行代码，它就成功了。可以我懂了。但如果您查看图像#2，您将看到页脚与内容重叠。我希望它位于

容器

@ryanfizgerald的下方，这是因为开发人员工具处于启用状态。如果你关闭它们，它将进入底部（如图1所示）。这也不起作用。它将页脚放在我屏幕的底部，但保持在那个位置。例如，如果我有一个需要向下滚动的页面（因为有太多的内容无法在该空间中显示），页脚将停留在该位置a好的，我喜欢使用表格。让我调整一下我的回答。这是我处理包含实体元素的流体布局的方法。表结构允许您用流体元素填充剩余的空间。在这种情况下，主要部件将页脚向下推，直到100%包装高度允许为止

position:absolute;
bottom:0px;