Sticky Footer Absolute Bottom method

This time to everyone to bring sticky Footer absolute bottom of the method, to achieve sticky Footer absolute bottom of the note what, the following is the actual case, together to see.

Recently, several front-end, work experience has a high and low, incredibly do not know the absolute bottom is what, and no one can say a way to realize, let me sigh with emotion in front of the field

The absolute bottom, or Sticky Footer, is an ancient and classic page effect:

When the page content is out of the screen, the footer module will be pushed below the content like 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 is pinned to the bottom of the screen, like a fixed position with a zero bottom margin

First, the classic routine

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

Then add margin-top to footer, which is a negative value of footer height, so footer can go back to the bottom of the screen

Html:

<p class= "wrap" >  <p class= "Content" >    <p> fill </p>  </p></p><p class= "Footer" >  <p> This is the footer </p></p>

Css:

html,body {  height:100%;}    Body > Wrap {  min-height:100%;}    . Content {/  * padding-bottom equals footer Height */  padding-bottom:60px;}    . footer {  width:100%;  height:60px;  /* Margin-top is negative for footer height *  /margin-top: -60px;}

It is important to note that content padding, footer height, and margin must remain consistent

This kind of writing compatibility is very good, the measured IE7 also can display normally

However, if the main layout of the page has other compatibility issues, Sticky Footer need to make some corresponding changes

Second, Flexbox

It must be said that CSS3 brought a revolution in the front end, in which Flexbox brought a change in the layout of the Web page.

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

Html:

<p class= "Content" >  <p> Fill Contents </p>  
Css:

HTML, body {  Display:flex;  height:100%;  Flex-direction:column;} Body > Content {  flex:1;}
Compared to the classic routines, the first is the HTML part, content area contents no longer need wrap container

Then the CSS part of the success of weight loss, just using four lines of code, solved the problem that once troubled a generation of people

And with Flexbox, you don't need to limit the height of footer to make the page layout more flexible.

Of course, the disadvantage is obvious, only IE10 and above the browser support flex layout

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Pure CSS for photo wall 3D effect

CSS Drawing fan pattern