CSS achieves footer "bottom absorption" effect

We often encounter this problem: how to use CSS to achieve the effect of the bottom element "sticking to the bottom". For "sticking to the bottom", this article has two understandings:

• First, no matter how much content there is, we want the button to be fixed at the bottom of the visible window and the content area to be scrollable.
• Second, when the content area has less content, the footer area is not arranged with the content area, but is always displayed at the bottom of the screen; when the content area has more content, the footer can expand with the document flow and is always displayed at the bottom of the page.
  

When it comes to the realization of the "bottom-absorbing" effect, you may be more familiar with the sticky-footer layout, but this method is mostly used to solve the second situation. This article will use the following three solutions to achieve the above two effects respectively, and briefly explain the implementation principles and their applicability. The wrapper consists of two parts: the content and the fixed bottom area (footer).

HTML settings:

<!-- wrapper is the parent container that wraps content and footer--></div>
<div class="wrapper">
   <div class="content">
     <ul>
       <!-- Page main content area--></div>
       <li>1. This is the content, this is the content…</li>
       <li>2. This is the content, this is the content…</li>
       <li>3. This is the content, this is the content…</li>
       <li>4. This is the content, this is the content…</li>
       <li>5. This is the content, this is the content…</li>
       <li>6. This is the content, this is the content…</li>
       <li>7. This is the content, this is the content…</li>
       <li>8. This is the content, this is the content…</li>
       <li>9. This is the content, this is the content…</li>
      </ul>
   </div>
  <div class="footer">
    <!-- Areas that need to be absorbed-->
    Bottom button</div>
 </div>

Note: The implementation of the following solutions is based on this HTML structure

Solution 1: Use position to position the elements to be fixed

Principle analysis:

• We hope that the height of the wrapper's outer container (including HTML and body) fills the entire screen, that is, set the height: 100%, and set the min-height of the wrapper: 100%. Here, min-height is set instead of height to ensure that the minimum height of the entire wrapper can be expanded to the full screen. Even if the content is not enough to fill the screen, the height of the wrapper is still the height of the full screen; when the height of the wrapper increases with the height of the content, its height can be greater than the height of the visible window.
• Setting the padding-bottom value of content (the container that needs to display content, the previous sibling element of footer) to be greater than or equal to the height value of footer can ensure that the content in content will not be covered by the footer area at the bottom.
• When setting the footer positioning method, we need to distinguish two effects here: if you want the footer to be fixed at the bottom of the page, set the wrapper's position:relative. Correspondingly, set the footer's position:absolute to make the footer absolutely positioned relative to the wrapper. In this way, no matter how much content there is, the footer can still be fixed at the bottom of the page; if you want to fix it at the bottom of the visible window, set the footer's position:fixed and set the corresponding positioning.
• Set height to a fixed height value.

Applicable scenarios:

The properties used are maturely implemented in all browsers. Compared with the second and third solutions, this method is the most recommended. It is not applicable to the following scenarios: There is a text box in the positioned (fixed) area, because in the iOS system, when the text box calls the input method, the positioned area will pop up and be some distance away from the bottom.

Fixed at the bottom of the page

Demo: https://codepen.io/hu0950/pen/yRVvQL

CSS settings:

html,
body
  height 100%
.wrapper
  position relative // ​​key box-sizing border-box
  min-height 100% // Key padding-bottom 100px // This value is set to be greater than or equal to the height of the button ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position absolute // key bottom 0
  left 0
  right 0
  height 100px //Set a fixed height background orange

Fixed at the bottom of the visible window

Demo: https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

CSS settings:

html,
body
  height 100%
.wrapper
  box-sizing border-box
  min-height 100% // Key padding-bottom 100px // This value is set to be greater than or equal to the height of the button ul
    list-style: none
    li
      height 100px
      background lightblue
.footer
  Position fixed // Fix the button to the bottom of the visible window bottom 0
  left 0
  right 0
  height 100px //Set a fixed height background orange

Solution 2: Use flexbox layout

Demo: https://codepen.io/hu0950/pen/bmBMMr

Applicable scenarios:

The flex layout has a simple structure and concise code. However, flex has compatibility issues, so you need to be careful when using this layout method. When achieving the effect of fixing at the bottom of the page, this flexible layout idea is adopted. The height of the bottom fixed area can be flexibly set without defining the height of the footer. This is also the advantage of this method.

Fixed at the bottom of the page

Principle analysis:

• Set the min-height of the wrapper to 100%. Here, min-height is set instead of height. The purpose is to expand the minimum height of the entire wrapper to the full screen. That is, when the content is not enough to fill the screen, the height of the wrapper is still full screen. When the height of the wrapper changes with the height of the content, its height can be greater than the height of the visible window, and it is not always equal to the height of the screen.
• Set the layout mode of wrapper to flex and the flex of content to 1, so that the height of content is always the height of wrapper minus the height of bottom footer.

CSS settings:

html,
body
  height 100%
.wrapper
  min-height 100% // Key display flex // Key flex-direction column // Key .content
  flex 1 //key ul
    list-style none
    li
      height 100px
      background lightblue
// The height can be left unchanged.footer
    padding 20px
    background orange

Fixed at the bottom of the visible window

Principle analysis:

In addition to the above (analysis in Solution 2 - Fixed at the bottom of the page), there are also the following points to note:

• Since the footer is out of the document flow due to the fixed setting, the wrapper needs to be given padding. The value should be greater than or equal to the height of the button to ensure that the footer does not cover the contents of the content area.
• Set the footer positioning mode to fixed and set the corresponding positioning to fix the footer to the bottom of the visible window.

CSS settings:

html,
body
  height 100%
.wrapper
  display flex // Key min-height 100% // Key padding-bottom 62px // This value is set to be greater than or equal to the height of the button flex-direction column // Key .content
  flex 1 //key ul
    list-style: none
  li
    height 100px
    background lightblue
.footer
  position fixed // key left 0
  right 0
  bottom 0
  padding 20px
  background orange

Solution 3: Using calc

Applicable scenarios

This solution does not require any additional style processing and the code is concise, but unfortunately the lower version system of the mobile terminal is not compatible with the calc attribute.

Fixed at the bottom of the page Demo: https://codepen.io/hu0950/pen/ePBjdB

Principle analysis:

The wrapper is set to min-height: 100% in the hope that the content can fill the entire screen when there is less content. At the same time, when the content increases to a height greater than the screen, the height of the wrapper can still increase with the height of the content. In this way, it can be ensured that the footer will be arranged in sequence below the content.

CSS settings:

html,
body
  height 100%
.wrapper
  min-height 100% //Key: min-height instead of height
.content
  min-height calc(100% - 100px) //Key: min-height instead of height
  ul
    list-style none
  li
    height 100px
    background lightblue
// Fixed height.footer
  height 100px
  background orange

Fixed at the bottom of the visible window Demo: https://codepen.io/hu0950/pen/bmBjqb?editors=1100#0

Principle analysis:

• The wrapper is set to height: 100% in the hope that no matter how much content there is, its height is the same as the height of the screen. In this way, the height of the content = the height of the parent element wrapper - the height of the bottom fixed element footer. Finally, overflow: scroll needs to be added to the content so that the hidden part of the content can also be displayed by scrolling.
• The parent element wrapper of content has height:100% set to ensure that when calculating the height of the content, 100% is fixed to the height of the screen and does not change with the height of the content.

CSS settings:

html,
body,
.wrapper
  height 100%
.content
  height calc(100% - 100px) // Key: Use height, not min-height
  overflow scroll // key ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position fixed
  left 0
  right 0
  bottom 0
  height 100px
  background orange

Final Thoughts

The author has tried the above implementation schemes in the project, and also provided a demo for each scheme to facilitate debugging and verification. Each implementation method has restrictive problems, such as the need to fix the footer height, or is not suitable for low-version systems on mobile terminals. You can choose the most suitable solution according to your specific needs. Due to the needs of a recent project, I have consulted a lot of information on the Internet but could not find a solution that can be used out of the box. There is also a lack of analysis of the implementation principles, so I wrote this article after my own summary and continuous testing. I hope it will be useful to my friends. This is my first gold mining experience. I hope you can encourage me.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.