我正在寻找一种向页面添加页脚的方法,该页脚始终显示在底部。问题是,页面上的很多内容是通过position: absolute;
设置的,所以目前,除非我手动给页脚一个margin-top: 900px;
值,否则它只是被一个绝对定位的内容隐藏。但是在内容小于900px的某些页面上,页面末尾和页脚之间的底部存在不必要的间隙。
如何以内容结尾和页脚之间没有差距的方式解决这个问题?
答案 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: block
和height: 250px
设置样式。
所以你需要做的就是添加:
position: fixed;
top: 100%;
margin-top: -250px;
就是这样。它会在底部永久对齐。:)
答案 4 :(得分:0)
答案 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>