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

时间:2013-01-15 21:08:55

标签: css

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

如何以内容结尾和页脚之间没有差距的方式解决这个问题?

6 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

将所有内容放在页脚之前的位置相对的div中。这个div将垂直弯曲到其中的内容,并将提供缓冲区以保持其正下方的任何内容。无需保证金。

答案 2 :(得分:1)

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

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

在你的情况下,将页脚的c-s中的z-index设置为10或更多。

答案 3 :(得分:0)

我们假设一个<footer>,使用display: blockheight: 250px设置样式。

所以你需要做的就是添加:

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

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

答案 4 :(得分:0)

粘性页脚。无需javascript:

http://www.cssstickyfooter.com/

答案 5 :(得分:0)

在做了一些摆弄之后,我被提醒绝对定位会从文档流中删除元素。您不能依赖绝对定位的元素来影响其他元素,因为它不会。因为您不知道内容的高度,所以使用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>