当前位置：文江博客话题详情

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

发布于 2024-11-02 14:10:23 字数 375 浏览 4 评论 0原文

我发现了 CSS 粘性页脚的 2 种不同实现：

Ryan Fait 粘性页脚 - http://ryanfait .com/sticky-footer/
Steve Hatcher 粘页脚 - http://www.cssstickyfooter.com/

有人可以解释一下它们各自工作方式之间的区别吗？

如果还有其他已知的实现，您能否发表评论或编辑这个问题？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

☆獨立☆ 2024-11-09 14:10:23

它们在功能上非常相似。第一个强制 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 内和 #wrap 内的 #main 内，并且页脚位于这些容器之外时，此方法才有效。

如果您不明白其中的任何部分，请给我留言，我会尽力回答。

编辑：响应 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 页面）。

They are pretty similar in terms of function. The first forces a div to the full height of the page and then give it a negative margin the size of the footer.

    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*/
}

What this does is makes sure that all content within the wrapping div is 100% of the page height minus the height of the footer. So that as long as the footer is the same size as the negative margin it will stick in the gap left and appear at the bottom of the element.

The second also forces the content to be 100% of the height of the page.

html, body {height: 100%;}  /*set 100% height*/

#wrap {min-height: 100%;} /* make content 100% height of screen */

It then creates a space at the bottom of the main content the same size as the footer.

#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) */

Then using position relative and a negative top margin forces the footer to appear 150px above its normal position (in the space it just made).

#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;}

Note: This only works so long as your page content is kept within .wrapper and #main inside #wrap respectively, and your footer is outside of these containers.

If you didn't understand any part of that leave me a comment and I'll try to answer it.

Edit: In response to user360122

HTML markup for first:

<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 markup for second:

<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>   
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>

Remember to include the stylesheet and declare doctype .etc (these aren't full html pages).

回复收藏 0 原文

浅紫色的梦幻 2024-11-09 14:10:23

bootstrap文档中有一个看起来非常简单的示例： 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;
}

There is an example in the bootstrap documentation which seems to be very simple: http://getbootstrap.com/examples/sticky-footer/

No wrapper or push needed.

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;
}

回复收藏 0 原文

~没有更多了~