Several ways to implement footer in CSS

This time to bring you in the CSS implementation footer The bottom of the several ways, in the CSS implementation of the footer the bottom of the note what, the following is the actual case, together to see.

The footer base (Sticky footer) is the footer portion of the page that is always at the bottom of the browser window.

When the page content is long enough to exceed the viewable height of the browser, the footer will be pushed to the bottom of the page as the content is placed, but if the page content is not long enough, the bottom footer will remain in the browser window.

Method One: Set the margin-bottom of the content part to a negative number

<p class= "wrapper" >    <!--Content--    <p class= "Push" ></p></p><p class= " Footer ">footer</p>

HTML, body {  margin:0;  padding:0;  height:100%;}. wrapper {  min-height:100%;    Margin-bottom: -50px; /* equals footer height */}.footer,. push {  height:50px;}

1. This method requires extra placeholder elements (P.push) in the container.

2, P.wrapper Margin-bottom need and p.footer the-height value, the attention is negative height.

Method Two: Set the margin-top of the footer to a negative number

Increase the parent element outside of the content and make the padding-bottom of the content part equal to the height of the footer.

<p class= "Content" >  <p class= "Content-inside" >    <!--Content--  </p></p> <p class= "Footer" >footer</p>

HTML, body {  margin:0;  padding:0;  height:100%;}. Content {  min-height:100%;}. content-inside {  padding:20px;  padding-bottom:50px;}. footer {  height:50px;  Margin-top: -50px;}

Method Three: Use Calc () to set the content height

<p class= "Content" >  <!--content--></p><p class= "Footer" >footer</p>

. Content {  Min-height:calc (100vh-70px);}. footer {  height:50px;}

This assumes that there is a 20px gap between P.content and P.footer, so 70px=50px+20px

Method Four: Use Flexbox flexible box layout

The footer height of the above three methods is fixed, and if the content of footer is too much, it may break the layout.

<p class= "Content" >  <!--content--></p><p class= "Footer" >footer</p>

HTML {  height:100%;} body {  min-height:100%;  Display:flex;  Flex-direction:column;}. Content {  flex:1;}

Method Five: Use grid grid layout

<p class= "Content" >  <!--content--></p><p class= "Footer" >footer</p>

HTML {  height:100%;} body {  min-height:100%;  Display:grid;  GRID-TEMPLATE-ROWS:1FR Auto;}. footer {  grid-row-start:2;  Grid-row-end:3;}

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:

React and CSS3 to realize the animation of removing red envelopes

How to use CSS Background-attachment advanced method