我发现一个CSS粘的页脚的2种不同的实现方式:CSS粘性页脚实现之间的区别?
瑞安既成事实粘页脚 - http://ryanfait.com/sticky-footer/
史蒂夫·哈彻粘页脚 - http://www.cssstickyfooter.com/
有人能解释每个人之间的区别如何?
如果还有其他已知的实现,您可以发表评论或编辑此问题吗?
我发现一个CSS粘的页脚的2种不同的实现方式:CSS粘性页脚实现之间的区别?
瑞安既成事实粘页脚 - http://ryanfait.com/sticky-footer/
史蒂夫·哈彻粘页脚 - http://www.cssstickyfooter.com/
有人能解释每个人之间的区别如何?
如果还有其他已知的实现,您可以发表评论或编辑此问题吗?
它们在功能上非常相似。第一个强制一个div到页面的整个高度,然后给它一个页脚大小的负边距。
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
这样做是为了确保包装div内的所有内容都是页面高度的100%减去页脚的高度。因此,只要页脚的尺寸与负页边的尺寸相同,它就会粘在留下的空白处并出现在元素的底部。
第二个也强制内容为页面高度的100%。
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
然后它会在主内容的底部创建一个与页脚大小相同的空格。
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
然后,使用位置的相对和负极上边距迫使页脚显示150像素以上的正常位置(在该空间中,它只是制造)。
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
注:这仅适用,只要你的页面内容分别保持.wrapper内#main内#wrap,和你的页脚是这些容器的外面。
如果你不明白任何部分给我留下评论,我会尽力回答。
编辑:响应于user360122
HTML标记为第一:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML标记为第二:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
请记住,包括样式表,并声明DOCTYPE .etc (这些不是完整的HTML页面)。
有引导文件,这似乎是很简单的一个例子:http://getbootstrap.com/examples/sticky-footer/
无包装或按需要。
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
在IE7中不起作用。认为使用push-div的人最好使用跨浏览器,而不使用js。 – sasha 2014-11-15 12:12:27
好答案乔治 – David 2011-04-21 16:13:56
嗨乔治,你有它的HTML标记吗?非常感谢。 – HorseKing 2011-06-24 14:29:31
用html标记更新 – 2011-06-24 16:03:06