1

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

我该如何解决这个问题，以使内容结尾和页脚之间没有间隙？

4

6 回答 6

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

于 2013-01-15T21:14:03.047 回答
1

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

于 2013-01-15T21:15:23.333 回答
1

你也可以放索引。z-index：1；

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

在您的情况下，将 z-index 放在 css 中以获取 10 或更多的页脚。

于 2013-01-15T21:53:46.923 回答
0

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

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

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

而已。它将在底部永久对齐。:)

于 2013-01-15T21:14:24.833 回答
0

粘性页脚。无需 javascript：

http://www.cssstickyfooter.com/

于 2013-01-15T21:15:26.400 回答
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>
于 2013-01-20T20:23:20.397 回答