Five ways of using CSS to implement footer

This article mainly introduces the detailed CSS five ways to achieve footer, small series feel very good, and now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

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;}