如何添加总是出现在页面底部的页脚

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

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

来源

2013-01-15 Click Upvote

看到这个问题：http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – SShaheen

另外，这样的：http://stackoverflow.com/问题/ 4154220/HTML-5英尺标签待总是在底部/ 4154509＃4154509 – SShaheen

在新的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-15 21:14:03

让我们假设一个<footer>，与display: block和height: 250px风格。

因此，所有你需要做的，以实现你想要的是加：

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

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

来源

2013-01-15 21:14:24

把一切之前的页脚放在一个div位置相对。该div将垂直伸缩到其中的内容，并将提供缓冲区以便在其正下方保留任何内容。无需保证金。

来源

2013-01-15 21:15:23 fredsbend

粘脚。没有JavaScript的要求：

http://www.cssstickyfooter.com/

来源

2013-01-15 21:15:26 tahdhaze09

你也可以把索引。 z-index：1;

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

在你的情况，提出的z-index在CSS的页脚在10以上。

来源

2013-01-15 21:53:46 Belhor

在做了一些摆弄之后，我被提醒说绝对定位从文档流中移除元素。你不能依赖绝对定位的元素来影响其他元素，因为它不会。由于您不知道内容的高度，因此使用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-20 20:23:20 fredsbend

如何添加总是出现在页面底部的页脚

回答

相关问题