Write it first: Sticky Footer is a layout scenario for css. The footer footer is always fixed at the bottom of the page. When the content of the page is not long enough, the footer sticks to the bottom of the window. When the content is long enough, it will be moved downward. Because the content of the old portal is too short, the copyright footer often moves forward. Sticky Footer is also needed to solve these problems for the specific layout of mobile portal.

1. Perfect compatibility of absolute positioning and padding

Known bottom height, perfect compatibility with padding using absolute positioning
https://codepen.io/qietuniu/pen/KYxMwv

1. Remove margin,padding, and set 100% for html and body
2. External container min-height is 100% so that it can be opened when the content is small.
3. Set padding-bottom for the main content, which is the height of the bottom, so that the content can be fully displayed, otherwise the area with the bottom area of the main content will be occluded.
4. footer height fixed, absolute positioning

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 Chick</div>
</div>

Style code

html,
body {
  height: 100%;
}
.container {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 min-height is not recognized*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
}

2. Perfect compatibility of padding-box and margin-top

Known bottom height, perfect compatibility with padding-bottom and margin-top
https://codepen.io/qietuniu/pen/dLqpdR

1. Remove margin and padding from labels and set 100% for html and body.
2. External container min-height is 100% so that it can be opened when the content is small.
3. The body content is padding-bottom, which is the height of the bottom.
4. footer height is fixed, margin-top value is highly negative

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 Chick</div>
</div>

Style code

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 min-height is not recognized*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: relative;
  margin-top: -60px;
  width: 100%;
  height: 60px;
}

3. Adding Block-level Elements to Fill in Footer Blocking

Given the bottom height, add block-level elements to fill the footer occlusion to achieve perfect compatibility
https://codepen.io/qietuniu/pen/dLqpez

1. Remove margin and padding from labels and set 100% for html and body.
2. External container min-height is 100% so that it can be opened when the content is small.
3. The body content sets margin-bottom, which is a negative value of the bottom height
4. footer is at the same level as container and section is at the same level with new block elements. The bottom and new block elements are highly consistent

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
<div class="footer">Copyright© 1994-2019 Chick</div>

Style code

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6 min-height is not recognized*/
  margin-bottom: -60px;
}
.placeholder,
.footer {
  height: 60px;
}

4. Implementing Perfect Compatibility with Table Attributes

Uncertain Height at the Bottom and Perfect Compatibility with Table Attributes
https://codepen.io/qietuniu/pen/QPVKVR

1. Remove margin,padding, and set 100% for html and body
2. External container min-height is 100%; it can be extended when content is small, and display property is set to table.
3. The display property of the main content is set to table-row and the height is set to 100%.

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 Chick</div>
</div>

Style code

html,
body {
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  min-height: 100%;
}
.section {
  display: table-row;
  height: 100%;
}

5. Cal calc ulation

VH has limited compatibility and is generally used in mobile terminals. 100vh can replace 100% of body and html to get the viewport height to achieve the effect
https://codepen.io/qietuniu/pen/NmLRmV

1. External containers are calculated using calc, 100 VH minus bottom height
2. footer position is the same level as container, and height is fixed
3. The display property of the main content is set to table-row and the height is set to 100%.

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
</div>
 <div class="footer">Copyright© 1994-2019 Chick</div>

Style code

.container {
  min-height: calc(100vh - 60px);
}
.footer {
  height: 60px;
}

6. Flexible Layout

Flexible layout is used to achieve the effect. Compatibility is limited and mobile terminal is recommended.
https://codepen.io/qietuniu/pen/EJeNYW

1. The external container display is set to flex elastic layout, flex-flow is set to column longitudinal and minimum height is set to 100vh.
2. The flex attribute of the body content is set to 1

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 Chick</div>
</div>

Style code

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {
  flex: 1
}

7. Grid Grid Layout

Unfixed bottom height, using Grid grid Grid to achieve results, compatibility is limited, mobile end is recommended to use
https://codepen.io/qietuniu/pen/EJeNYW

1. The external container display is set as grid grid grid layout, the grid-template-rows is set as a grid row, and the fr unit can help us create a grid trajectory of a bullet, which represents the space available in the grid container (like the value without units in Flexbox).
2. The header head is placed inside the body content
3. The grid-row-start and grid-row-end attributes in footer set the line at the beginning and end of a cell

DOM node

<div class="container">
  <div class="header"></div>
  <div class="section">
  </div>
  <div class="footer">Copyright© 1994-2019 Chick</div>
</div>

Style code

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

epilogue

The above methods have their own advantages and disadvantages. Choose the appropriate scheme according to the use scenario.

scene	programme
High compatibility requirement	①②③
Unfixed height at bottom	④⑥⑤⑦
PC recommendations	①②
Mobile recommendation	①②⑥

Complete code