如何添加始终显示在页面底部的页脚答案

【问题标题】：How to add a footer which always shows up at the bottom of the page如何添加始终显示在页面底部的页脚
【发布时间】：2013-01-21 04:23:20
【问题描述】：

我正在寻找一种方法来为我的页面添加页脚，该页脚将始终显示在底部。问题是，页面上的很多内容都是通过position: absolute; 设置的，所以目前，除非我手动给页脚一个margin-top: 900px; 值，否则它只是被绝对定位的内容之一隐藏。但是在一些内容小于 900px 的页面上，页面末尾和页脚之间的底部有一个不必要的间隙。

我怎样才能解决这个问题，让内容的结尾和页脚之间没有间隙？

【问题讨论】：

看到这个问题：stackoverflow.com/questions/90178/…
另外，这个：stackoverflow.com/questions/4154220/…

标签： css

【解决方案1】：

在新的 jquery 中，你可以使用这个：

<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>

来自http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

【讨论】：

【解决方案2】：

将页脚之前的所有内容放在具有相对位置的 div 中。此 div 将垂直于其中的内容弯曲，并提供缓冲区以将其后的任何内容保留在其正下方。不需要边距。

【讨论】：

【解决方案3】：

你也可以放索引。 z-index: 1;

http://www.fiveminuteargument.com/fixed-position-z-index

在您的情况下，将 z-index 在 css 中作为页脚设置为 10 或更多。

【讨论】：

【解决方案4】：

让我们假设一个<footer>，样式为display: block 和height: 250px。

所以你所要做的就是添加：

position: fixed;
top: 100%;
margin-top: -250px;

就是这样。它将在底部永久对齐。 :)

【讨论】：

【解决方案5】：

粘性页脚。无需 javascript：

http://www.cssstickyfooter.com/

【讨论】：

【解决方案6】：

在做了一些摆弄之后，我被提醒绝对定位会从文档流中删除元素。您不能依赖绝对定位的元素来影响其他元素，因为它不会。因为你不知道内容的高度，所以使用 margin-top 显然不是选项。

所以我想出了这个：基本上使用浮动进行正常布局，然后使用相对位置将项目移动到您想要的位置。这样，元素仍然会影响文档流，但是，现在您可以完全控制位置。这正是相对定位的用途：您希望完全控制元素的位置，但仍希望它们的元素正常影响布局。

<html>

<head>

<style>

body {
    text-align:center;
}
#container {
    position:relative;
    margin:0 auto;
    width: 1000px;
    text-align:left;
}
#header {
    position:relative;
    top:0px;
    left:0px;
    width:1000px;
    height: 100px;
    border:solid 1px #000;
}
#sidebar {
    position:relative;
    top:10px;
    left:0px;
    width:300px;
    height: 500px; /* for demo */
    float:left;
    margin-bottom: 20px;
    border:solid 1px #000;
}
#main {
    position:relative;
    top:10px;
    left:310px;
    width:690px;
    height: 200px; /* for demo */
    margin-bottom:20px;
    border:solid 1px #000;
}
#footer {
    margin:0 auto;
    top:20px;
    width: 1000px;
    text-align:left;
    height: 100px;
    clear:both;
    border:solid 1px #000;
}
</style>
</head>
<body>

<div id="container"> <!-- Holds all the content except the footer -->

<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>

</div>

<div id="footer">Footer content here</div>

</body>

</html>

【讨论】：