CSS footer Five ways to achieve bottom-end sharing

Footer Base (Sticky footer)is to make the footer part of the Web page always at the bottom of the browser window.

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

Method One: Set the content part margin-bottom 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 () in the container p.push .

2. p.wrapperThe margin-bottom need and p.footer value of the -height same, attention is negative height .

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

• Adds a parent element outside of the content and makes the content part equal to the padding-bottom footer height .

<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() set content height

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

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

• This assumes p.content p.footer that there is a 20px gap between them, 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;}