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~