Sticky Footer Absolute Bottom Two Routines

Sticky Footer Absolute Bottom Two Routines

I have met several front-ends recently, and my work experience is high and low. I don't even know what the absolute bottom is, and no one can say a way to achieve it. I can't help feeling that the front-end field is mixed.

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, and you need to drag the scroll bar to see it

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 zero bottom margin

 

One, the classic routine

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

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

HTML：

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

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
   /* padding-bottom is equal to footer height */ 
  padding-bottom : 60px ;
}
    
.footer { 
  width : 100% ; 
  height : 60px ;
   /* margin-top is the negative value of footer height */ 
  margin-top : -60px ;
}

It should be noted 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 the measured 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

 

、 、 Flexbox

It has to be said that CSS3 has brought a change in the front end, and Flexbox has brought a change in the layout of web pages.

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

If you don't know Flexbox yet, you can take a look at Teacher Ruan Yifeng's blog  Flex Layout Tutorial: Grammar

HTML:

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

CSS:

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

body .content {
  flex: 1;
}

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

Then CSS partial weight loss succeeded, using only four lines of code to solve a 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

 

Finally, welcome to share some new routines~