CSS粘贴页脚实现之间的区别？

| 我发现CSS粘贴页脚的2种不同实现： Ryan Fait粘性页脚-http://ryanfait.com/sticky-footer/ 史蒂夫·哈彻（Steve Hatcher）的粘性页脚-http://www.cssstickyfooter.com/ 有人可以解释他们每个人的工作方式之间的区别吗？并且，如果还有其他已知的实现，您可以发表评论或编辑此问题吗？

已邀请:

2 个回复

蹦吃舷弦

它们在功能上非常相似。第一个将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;
}

要回复问题请先登录或注册

CSS粘贴页脚实现之间的区别？

2 个回复

发起人

css

sticky_footer

问题状态

CSS粘贴页脚实现之间的区别？

与内容相关的链接

2 个回复

发起人

css

sticky_footer

问题状态