Implementation of classic layout of CSS sticky footer

Time:2020-6-19

What is sticky footer layout?

Our common web page layout is generally divided into the header part, content part and footer part. When there is less content in the header area and content area, the footer area is always displayed at the bottom of the screen instead of following the content area. When there is more content in the content area, the footer can be displayed at the bottom of the page as the document flow starts. This is the legendary sticky footer layout. Is it easy to understand. It doesn’t matter if you don’t understand me. Let me give you a simple example.

Generally, when the content height of the mobile page is less than one screen, the footer is close to the bottom of the screen; when the content height is more than one screen, the footer is close to the bottom.

Method 1: Flex flexible box layout

  • The display of the parent container is flex, and the order of items is vertical
  • The content element’s flex is 1, that is, if there is extra space, it will increase
  • Footer defines a height

To view the demonstration, please click: Flex flexible box layout to implement sticky footer

<div class="container">
  < div class = "content" > content < / div >
  < div class = "footer" > footer < / div >
</div>
body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
  /*Not required*/
  width: 100%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #71a8da;
  /*Not required*/
}
.footer {
  height: 60px;
  /*Not required*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*Not required*/
}

Method 2: padding bottom + negative margin top

  • Container wrapper needs to specify min height of 100vh (VH: window height)
  • The content is written in the content container, specifying padding bottom as the height of the footer container
  • Footer specifies height and margin top, and margin top is a negative value of height

To view the demonstration, please click: padding bottom + negative margin top to implement sticky footer

<div class="wrapper">
  < div class = "content" > content < / div >
</div>
< div class = "footer" > footer < / div >
body {
  margin: 0;
}
.wrapper {
  width: 100%;
  min-height: 100vh;
}
.content {
  /*Padding bottom should be equal to the height of the footer*/
  padding-bottom: 60px;
  /*Not required*/
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #71a8da;
  /*Not required*/
}
.footer {
  /*Margin top should be equal to the negative value of footer height*/
  margin-top: -60px;
  height: 60px;
  /*Not required*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*Not required*/
}

Tip: two/**Not required**/The part between them is not the necessary code to implement the sticky footer layout, but some auxiliary styles, which can be deleted

This article is about the implementation of classic layout of CSS sticky footer. For more information about CSS sticky footer, please search previous articles of developer or continue to browse the following articles. I hope you can support developer in the future!