What is Sticky Footer layout?

The common layout of a web page consists of a header section, a content section, and a footer section. When the header and content areas are small, the footer area does not follow the content area and is always displayed at the bottom of the screen. When the content area is large, the footer can always be displayed at the bottom of the page along with the document flow. This is known as the Sticky Footer layout. Is it easy to understand. It doesn’t matter if you don’t understand. Let me give you a simple example.

Take a chestnut

  • When the content is small, the normal document flow appears as follows:

    In a normal document flow, when content is low, the footer portion is not always fixed at the bottom of the screen. This is where the legendary Sitcky Footer layout comes in.

  • The sticky Footer layout is as shown below:

    No matter how much content there is in the content area, the footer is always displayed at the bottom of the screen when the content area exceeds the height of the screen. The footer is always displayed at the very bottom of the page. Now that you know sticky Footer, let’s see how it works.

Sticky Footer layout implementation

  • Negative margin layout

HTML code:

  <div class="detail">
     <div class="wrapper clearfix">
       <div class="title"> <h1> <div > <div class="main"> <p> <p style = "text-align: center; </p> <p> Here is the main content area... </p> <p> Here is the main content area... </p> <p> Here is the main content area... </p> </div> </div> <div class="footer""> <p> <p style =" max-width: 100%; clear: both; clear: both;Copy the code

The CSS code:

div,h1,p{margin:0; padding: 0; } .detail{ position:fixed; overflow:auto; width:100%; height:100%; } .wrapper{ min-height:100%; width:100%; } .title h1{ font-size:40px; text-align: center; } .main{ margin-top:64px; padding-bottom:64px; } .main p{ font-size: 25px; text-align: center; } .footer{ margin:-64px auto 0 auto; font-size:32px; } .footer p{ text-align: center; } .clearfix::after { display: block; content:".";
      height: 0;
      clear: both;
      visibility: hidden;
    }
Copy the code

Note: The padding-bottom in main and the negative margin in footer should be the same.

  • HTML code for flex layout:
  <header> 
      <h1>Site name</h1> 
  </header> 
  <div class="main"> <p>Bacon Ipsum dolor sit amet... </p> <p>Bacon Ipsum dolor sit amet... </p> <p>Bacon Ipsum dolor sit amet... </p> <p>Bacon Ipsum dolor sit amet... <p> < div style = "text-align: center; text-align: center; text-align: center; text-align: center;"Copy the code

The CSS code:

body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto; } h1{font-size: 60px; text-align: center; } p{font-size: 24px; text-align: center; } .main{flex:1; }Copy the code

The Flex layout structure is simple and the code is simple. Because flex is compatible, you need to be careful when using this layout.

summary

Here is the end of our discussion, hope to be helpful to small partners. This is also my first time to record the blog, there is not enough complete place hope you big guy many forgive, give guidance. The sticky Footer layout is also a classic CSS layout and should be familiar to beginners. Of course, the use of more natural will also.