Detailed explanation of two routine examples of Sticky Footer's absolute bottom

This article mainly introduces two routines that explain the absolute bottom of Sticky Footer in detail. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Absolute bottom, or Sticky Footer, is an old and classic page effect:

When the page content exceeds the screen, the footer module will be pushed below the content like a normal page , you need to drag the scroll bar to see

And when the page content is smaller than the screen height, the footer module will be fixed at the bottom of the screen, just like a fixed positioning with a zero bottom margin

1. Classic routine

The idea of ​​this routine is to set min-height: 100% for the content area and change the footer Push it to the bottom of the screen

Then add margin-top to the footer, whose value is the negative value of the footer height, so that the footer can return to the bottom of the screen

HTML:

<p class="wrap">
  <p class="content">
    <p>填充内容</p>
  </p>
</p>
<p class="footer">
  <p>这是页脚</p>
</p>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

What needs to be noted is that the padding of the content area, the height and margin of the footer must be consistent

The compatibility of this writing method is very good, and it can also be displayed normally in IE7 according to the actual test

But if the main layout of the page has other compatibility issues, the Sticky Footer will need to make some corresponding modifications

2. Flexbox

It must be said that CSS3 has brought about a change in the front-end, and Flexbox has brought about a change in web page layout

Although compatibility limits the promotion of Flexbox in China, it is undeniable that Flexbox is a major trend in front-end layout

HTML:

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

Compared with the classic routine, first is the HTML part, the content area content no longer needs a wrap container

Then the CSS part is successfully reduced, Using only four lines of code, we solved the problem that once plagued a generation

And using Flexbox, there is no need to limit the height of the footer, making the page layout more flexible

Of course, the shortcomings are also obvious , only IE10 and above browsers support flex layout

Related recommendations:

CSS positioning DIV absolute bottom_html/css_WEB-ITnose

How to fix the bottom of footer

How to use javascript to judge the scroll bar to the bottom code example

The above is the detailed content of Detailed explanation of two routine examples of Sticky Footer's absolute bottom. For more information, please follow other related articles on the PHP Chinese website!