Question

可能重复：
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

任何意见，建议和答案都表示赞赏。

Answer 1

<强> EDITED

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

Answer 2

只需添加到#footer-container

即可

position:absolute;
bottom:0px;

将footer放在页面底部。

让页脚停留在页面底部

2 个答案: