Sticky Footer Absolute bottom of two routines examples

This article mainly introduces the detailed sticky Footer absolute bottom of the two routines, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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