我发现了2个不同的CSS粘贴页脚实现:
Ryan Fait粘性页脚 - http://ryanfait.com/sticky-footer/
Steve Hatcher粘性页脚 - http://www.cssstickyfooter.com/
有人可以解释他们每个人的工作方式之间的区别吗？
如果还有其他已知的实施方式,您可以发表评论或编辑此问题吗？
Geo*_*ith 15
它们在功能上非常相似.第一个强制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) */
然后使用位置相对和负上边距强制页脚显示高于其正常位置150px(在它刚刚制作的空间中).
#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页面).
| 归档时间： |
|
| 查看次数： |
2223 次 |
| 最近记录： |