Difference between CSS sticky footer implementatio

2020-07-16 08:05发布

站内问答 / HTML/CSS
1724 2 5

I've found 2 different implementations of a CSS sticky footer:

  1. Ryan Fait sticky footer - http://ryanfait.com/sticky-footer/

  2. Steve Hatcher sticky footer - http://www.cssstickyfooter.com/

Could someone explain the difference between how each of them work?

And if there are other known implementations, could you please post a comment or edit this question?

2条回答
老娘就宠你
2楼-- · 2020-07-16 08:49

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人赞 添加讨论(0) 举报
唯我独甜
3楼-- · 2020-07-16 08:51

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)