Five ways to use CSS to achieve footer bottom

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 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 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 to be the same as the-height value of P.footer, 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;}