获取页脚留在页面底部[重复]

Posted 2023-03-21

【中文标题】获取页脚留在页面底部[重复]

【英文标题】：Get Footer to stay at the bottom of the page [duplicate]

【发布时间】：2012-12-23 00:22:54

【问题描述】：

可能重复：CSS to make html page footer stay at bottom of the page with a minimum height

（网站链接：http://www.eastsidespeedway.weebly.com/）

请使用上面的链接和您的浏览器开发工具查看html/css。

我试图让页面的页脚保持在页面底部。它现在看起来好像已经关闭了，但这只是因为它适合页面。例如，如果您转到 /404.html，您会看到它是一个无页眉页面，并且页脚几乎位于页面的一半！我使用 Weebly 添加内容等，但我使用 Dreamweaver 构建站点。我在网上尝试了多种方法，但它们似乎使页脚超出实际内容的位置，您看不到它。我需要它低于内容。

网站布局是这样的（示例）：

<div id="container>
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer-container>
  <div id="footer"></div>
</div>

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

我对 html/css 有点陌生，如果您不太了解，请见谅。

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

感谢任何 cmets、建议、答案。

【问题讨论】：

我不得不投反对票，因为网上有很多关于如何实现这一点的教程和材料。

好吗？我确实相信我说过我经历了一堆教程，但它们都不起作用。其中一半是放在页面底部，另一半是各种各样的东西。我是 html/css 的新手..

没有？不是重复的吗？与我正在使用/正在做的完全不同的事情。

【参考方案1】：

已编辑

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

【讨论】：

这也不起作用。它将页脚放在我屏幕的底部，但留在那个位置。例如，如果我有一个需要向下滚动的页面（因为在该空间中显示的内容太多），页脚将保留在该位置

好吧，我喜欢使用表格。让我调整一下我的答案

完成。这是我处理包含实体元素的流体布局的方式。表格结构允许您用流体元素填充剩余空间。在这种情况下，主要部分将页脚向下推到 100% wrapperheight 允许的范围内

【参考方案2】：

只需添加到#footer-container

position:absolute;
bottom:0px;

将footer 放在页面底部。

【讨论】：

我试过了，它把页脚放在页面中间。这是我用来查看是否有任何错误会导致这种情况的代码。

#footer-container 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_bg.png) no-repeat center bottom; width: 100%; #footer height: 90px; width: 960px; text-align: center; margin-right: auto; margin-left: auto; font-family: verdana; color: #fff; #footer a color: #fff; text-decoration: none; #footer a:hover color: #fff; text-decoration: underline;

我只放了那两行代码，它就起作用了。 images

好的。我知道了。但是，如果您查看图像 #2，您会看到页脚与内容重叠。我希望它低于container

@RyanFitzgerald 那是因为开发人员工具已开启。如果你把它们关掉，它会走到底部（看图片#1）。