CSS realizes automatic bottom pasting when the content height is not enough

Time:2020-11-30

In the process of UI cutting, the page is usually composed of three parts: the head, the content and the bottom. When the content height of the page is not enough to cover the screen, the bottom (foot) will float up with the content. Due to the limited height of the small screen, no abnormality can be seen. However, if it is a large screen, there will be a lot of white space at the bottom, which greatly affects the beauty.

Scenario 1: Flex box

The head uses position: sticky; suction top, and then uses the box (main) to wrap the content (container > content) and the bottom (footer). This box sets the minimum height to the remaining screen height except the head: Min height: Calc (100vh – 50px); the box uses flexible layout (Flex: 1 1 1 Auto; 2); )Let the content area expand automatically, while the bottom remains unchanged (Flex: 0.00 Auto;), so that the bottom will automatically suck when the content is insufficient, and move down automatically when the content is enough.

Example:

<html>
  <head>
    < title > CSS to achieve the bottom (footer) paste - scheme 1: Flex box < / Title >
    <style>
      body {
        margin: 0;
      }
      header {
        height: 50px;
        background: #20c997;
        position: sticky;
        top: 0;
      }
      main {
        display: flex;
        flex-flow: column nowrap;
        min-height: calc(100vh - 50px);
      }
      .container {
        flex: 1 1 auto;
      }
      .content {
        background: #0d6efd;
      }
      footer {
        flex: 0 0 auto;
        background: #fd7e14;
      }
    </style>
  </head>
  <body>
    <! -- head -- >
    <header>
      header
    </header>
    <main>
      <div class="container">
        <! -- content -- >
        <div class="content">
          content
        </div>
      </div>
      -- -- <! >
      <footer>
        footer
      </footer>
    </main>
  </body>
</html>

Online demo:https://codepen.io/mazeyqian/pen/rNeymdG

Advantages: the bottom height can be opened freely.

Disadvantages: low version browsers have compatibility (Flex box & Calc) issues.

Scheme 2: bottom negative distance margin

The minimum height of the content area is set to cover the page, and then the negative distance margin of equal height is set at the bottom.

Example:

<html>
  <head>
    < title > CSS implementation of bottom pasting - scheme 2: bottom negative distance 'margin' < / Title >
    <style>
      body {
        margin: 0;
      }
      header {
        height: 50px;
        background: #20c997;
        position: sticky;
        top: 0;
      }
      .container {
        min-height: calc(100vh - 50px);
      }
      .content {
        background: #0d6efd;
      }
      footer {
        height: 50px;
        margin-top: -50px;
        background: #fd7e14;
      }
    </style>
  </head>
  <body>
    <! -- head -- >
    <header>
      header
    </header>
    <div class="container">
      <! -- content -- >
      <div class="content">
        content
      </div>
    </div>
    -- -- <! >
    <footer>
      footer
    </footer>
  </body>
</html>

Online demo:https://codepen.io/mazeyqian/pen/eYZvjzr

At this point, when the height of CSS implementation content is not high enough, this article introduces the automatic bottom pasting at the bottom of CSS. For more related content of automatic bottom pasting at the bottom of CSS, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!