Implementation of CSS sticky footer classic layout

What is a sticky footer layout?

Our common web page layout is generally divided into the header part, the content part and the footer part. When the content in the header and content areas is small, the footer area is not arranged along with the content area but is always displayed at the bottom of the screen. When the content area contains a lot of content, the footer can expand with the document flow and always appear at the bottom of the page. This is the legendary Sticky footer layout. Isn’t it easy to understand? It’s okay if you don’t understand. Let me give you a simple example.

Generally speaking, on a mobile page, when the content height does not fill up one screen, the footer is close to the bottom of the screen; when the content height exceeds one screen, the footer follows closely.

Method 1: flex box layout

• The display of the parent container is flex, and the order of items is specified to be vertical.
• The flex of the content element is 1, which means it will grow if there is extra space.
• footer defines a height

Click hard to see the demo: Flexbox layout implements 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

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

Click hard to see the demo: padding-bottom + negative margin-top to achieve 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 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: The part between the two /**非必須**/ is not necessary code to implement the sticky footer layout. It is just some auxiliary styles and can be deleted.

This is the end of this article about the implementation of the classic CSS sticky footer layout. For more relevant CSS sticky footer content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!