Sticky Footer The absolute bottom method

This time I will bring you the method of achieving the absolute bottom of Sticky Footer. What are the precautions to achieve the absolute bottom of Sticky Footer. The following is a practical case, let’s take a look.

I have interviewed several front-ends recently, with varying work experience. I don’t even know what the absolute bottom is, and no one can tell me a way to achieve it. I can’t help feeling that the front-end field is uneven.

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. 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 %, push the footer to the bottom of the screen

and 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 the padding of the content area, the height and margin of the footer, which must be consistent

The compatibility of this writing method Very good, tested IE7 can also display normally

But if the main layout of the page has other compatibility issues, Sticky Footer needs 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 Flexbox Promotion in China, but 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 of all It is the HTML part, and the content area content no longer needs a wrap container

Then the CSS part has successfully lost weight. Using only four lines of code, it has solved the problem that once troubled a generation

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

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

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Pure css to realize the 3D effect of the photo wall

Css to draw a fan pattern

The above is the detailed content of Sticky Footer The absolute bottom method. For more information, please follow other related articles on the PHP Chinese website!