Classic layout of CSS sticky foot

Time:2020-12-7

What is sticky footer layout?
Generally refers to the mobile phone page, when the content height is less than one screen, the page foot is close to the bottom of the screen; when the content height is more than one screen, the footers follow closely.

Classic layout of CSS sticky foot

Method 1: Flex flexible box layout

  1. The display of the parent container is flex, and the order of items is vertical
  2. If the flex of content element is 1, it will increase if there is extra space
  3. Footer defines a height

To view the demo, please click:Flexible box layout for sticky footers

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

Method 2: padding bottom + negative margin top

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

To view the demo, please click:Padding bottom + negative margin top to implement sticky footers

<div class="wrapper">
  < div class = "content" > content < / div >
</div>
< div class = "footer" > footers < / 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;
  /*Must not*/
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #71a8da;
  /*Must not*/
}
.footer {
  /*Margin top should be equal to the negative value of the foot height*/
  margin-top: -60px;
  height: 60px;
  /*Must not*/
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: #f85f2f;
  /*Must not*/
}

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