We often come across the problem of how to use CSS to make bottom elements “stick to the bottom”. Here are two ways to understand “stick to the bottom” :

  1. One is that no matter how much content there is, we want the button to be fixed at the bottom of the visual window and the content area to be scrollable.
  2. Second, when the content area is small, the footer area is not arranged with the content area, but always displayed at the bottom of the screen; When there is a lot of content in the content area, the footer can spread out as the content area grows, always showing at the bottom of the page.

When it comes to the implementation of the “bottom sucking” effect, we may know more about the sticky-footer layout, but this approach is mostly used to solve the second case of the implementation. This paper will use the following three schemes to achieve the above two effects respectively, and the simple realization of the principle and its application. The wrapper contains two parts, the content and the area to be fixed at the bottom (footer).

HTML Settings

<! </div> <div class="wrapper">
   <div class="content"> <ul> <! 1. This is the content, this is the content... </li> <li>2. This is content, this is content... </li> <li>3. This is content, this is content...... </li> <li>4. This is content, this is content...... </li> <li>5. This is content, this is content... </li> <li>6. This is content, this is content... </li> <li>7. </li> <li>8. This is content, this is content...... </li> <li>9. This is content, this is content...... </li> </ul> </div> <div class="footer"> <! </div> </div>Copy the code

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

Scheme 1: Use position to locate elements to be fixed

The principle of analysis

  • We want the wrapper’s outer container (HTML, body) to fill the entire screen with height:100% and the Wrapper’s min-height:100%. This is to ensure that the minimum height of the entire Wrapper can be stretched to the full screen, even if the content is not enough to fill the screen. When the wrapper height increases with the content height, it can be larger than the height of the visible window.
  • Setting the padding-bottom value of the Wrapper to be greater than or equal to the height of the footer ensures that the content in the wrapper will not be overwritten by the footer area at the bottom.
  • Set the footer positioning mode, here to distinguish between the two effects: If you want the footer to be fixed at the bottom of the page, set position:relative to the Wrapper and position:absolute to the footer so that the footer is absolutely positioned relative to the Wrapper. The footer can still be fixed at the bottom of the page; If you want it to be fixed at the bottom of the visual window, set position: Fixed for the footer and set the corresponding position.
  • Set height to a fixed height value.

Applicable scenario

The properties used are well implemented in all browsers, and this approach is preferred over the second and third alternatives. This operation does not apply to the following scenarios: Fixed text boxes exist in the fixed area, because in the ios system, when the text box calls the input method, the fixed area will pop up, some distance from the bottom.

Fixed at the bottom of the page

Codepen. IO /hu0950/pen/…

CSS Settings

html, // box-sizing border-box min-height 100% // padding-bottom 100px // Ul list-style none li height 100px background lightblue. Footer Position Absolute // Key bottom 0 left 0 Right 0 height 100px // Set the fixed height background orangeCopy the code

Fixed to the bottom of the visual window

Codepen. IO /hu0950/pen/…

CSS Settings

html, Body height 100%. wrapper box-sizing border-box min-height 100px // key padding-bottom 100px // This value is greater than or equal to the button height ul list-style: None li height 100px background lightblue. Footer position fixed bottom 0 left 0 right 0 height 100px // Set a fixed height background orangeCopy the code

Scenario 2: Use flexbox layout implementation

Applicable scenario

Flex has a simple layout structure and minimal code. But Flex has compatibility issues that need to be taken care of when using layouts in this way. The idea of a flexible layout is that you can set the height of the fixed area at the bottom of the page without having to define the height of the footer.

Fixed at the bottom of the page

Codepen. IO /hu0950/pen/…

The principle of analysis

  • Set min-height of the Wrapper :100%, min-height instead of height, so that the minimum height of the wrapper is full screen, i.e., if the content is not enough to fill the screen, the wrapper height is still full screen. When the wrapper height changes as the content height increases, it can be larger than the visible window height, not always equal to the screen height.
  • Set the wrapper layout to Flex and flex:1 for the content so that the height of the content is always the Wrapper minus the bottom footer.

CSS Settings

html, Body height 100%.wrapper min-height 100% // key display flex // key flex-direction column // key List-style none li height 100px background lightblue // Footer padding 20px background orangeCopy the code

Fixed to the bottom of the visual window

Codepen. IO /hu0950/pen/…

The principle of analysis

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

  • Since the footer is removed from the document stream by setting fixed, the padding should be greater than or equal to the height of the button to ensure that the footer does not overwrite the content area.
  • Set the positioning mode of the footer to fixed and set the corresponding positioning to make the footer fixed at the bottom of the visible window.

CSS Settings

html, 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 // Left 0 right 0 bottom 0 PADDING 20px background orangeCopy the code

Scheme 3: CalC is used

Applicable scenario

This solution does not require any additional styling and the code is concise, but unfortunately the older version of the system on mobile is not compatible with calC properties.

Fixed at the bottom of the page

Codepen. IO /hu0950/pen/…

Principle analysis:

  • The wrapper setting min-height:100% is intended to fill the screen when the content is small, but also to increase the wrapper height when the content is larger than the screen. This ensures that the footers are placed below the content.

CSS Settings:

HTML, body height 100%.wrapper min-height 100%.content min-height calc(100%-100px) Ul list-style none li height 100px background lightblue // footer height 100px background orangeCopy the code

Fixed to the bottom of the visual window

Codepen. IO /hu0950/pen/…

Principle analysis:

  • Content height = parent element Wrapper height – need to fix the bottom element footer height Finally, we need to add overflow: Scroll to the content so that the hidden parts of the content can also be displayed by scrolling.
  • The Wrapper element, the parent of the content, sets height:100% to ensure that the content height is calculated at 100% equal to the height of the screen rather than depending on the content height.

CSS Settings:

HTML, body,.wrapper height 100%. content height calc(100%-100px) Use the height, 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 orangeCopy the code

Write in the last

The author tried all the above implementation schemes in the project, and gave demos for each scheme to facilitate debugging and verification. Each implementation method has limitations, such as the need to fix the footer height, or not suitable for the mobile end of the lower version of the system and so on. You can choose the most suitable solution according to your specific needs.

Due to the recent project needs, I have looked up a lot of information from the Internet, and it is difficult to get a solution that can be used immediately, or lack of analysis on the implementation principle, so I have made relevant summaries and written this article for the above problems. Hope to be useful to small friends. If there is something wrong or bad in the article, please correct it. You are also welcome to discuss some compatibility problems encountered when solving the “bottom sucking” problem, or put forward some better solutions

Refer to the article

Css-tricks.com/couple-take…