CSS makes the footer automatically stick to the bottom when the content height is not enough

In the UI cutting process, the page is often composed of three parts: header, content and footer. When the content of the page is not high enough to fill the screen, the footer will float up with the content. The small screen has limited height and no abnormality can be seen, but if it is a large screen, there will be a lot of blank space below the bottom, which greatly affects the appearance.

Solution 1: Flex-Box

The header uses position: sticky; to absorb the top, and then uses a box ( main ) to wrap the content ( container > content ) and the bottom ( footer ). The minimum height of this box is set to the remaining screen height excluding the header: min-height: calc(100vh - 50px); , and the box uses elastic layout ( flex: 1 1 auto; ) to make the content area automatically expand, while the bottom remains unchanged ( flex: 0 0 auto; ), so that the bottom automatically absorbs the bottom when there is not enough content, and automatically moves down when there is enough content.

Example:

<html>
  <head>
    <title>CSS to achieve bottom (footer) - Solution 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>
    <!--Header-->
    <header>
      header
    </header>
    <main>
      <div class="container">
        <!--Contents-->
        <div class="content">
          content
        </div>
      </div>
      <!--Bottom-->
      <footer>
        footer
      </footer>
    </main>
  </body>
</html>

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

Advantages: The bottom height can be expanded freely.

Disadvantages: There are compatibility issues (Flex-Box & Calc) with older browsers.

Solution 2: Negative margin at the bottom

The content area is set to have a minimum height to fill the page, and a negative margin of equal height is set at the bottom.

Example:

<html>
  <head>
    <title>CSS to achieve bottom (footer) - Solution 2: negative distance bottom `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>
    <!--Header-->
    <header>
      header
    </header>
    <div class="container">
      <!--Contents-->
      <div class="content">
        content
      </div>
    </div>
    <!--Bottom-->
    <footer>
      footer
    </footer>
  </body>
</html>

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

This concludes this article about how to use CSS to automatically stick the footer to the bottom when the content height is not enough. For more information about how to automatically stick the footer to the bottom with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Summary of CSS usage tips

>>: Time zone issues with Django deployed in Docker container

CSS makes the footer automatically stick to the bottom when the content height is not enough

Vue.js implements calendar function

Vue backend management system implementation of paging function example

mysql 5.7.11 winx64.zip installation and configuration method graphic tutorial

Detailed explanation of the use of CSS pointer-events attribute

Detailed explanation of firewall rule settings and commands (whitelist settings)

MySQL learning notes: complete select statement usage example detailed explanation

Docker custom network container interconnection

How to recover data after accidentally deleting ibdata files in mysql5.7.33

5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)

Details of using Vue slot

Recommend

Deploy Varnish cache proxy server based on Centos7

CSS element hiding principle and display:none and visibility:hidden

How to install and configure WSL on Windows

Sample code for using CSS to write a textured gradient background image

Specific method to delete mysql service

Vue+js realizes video fade-in and fade-out effect

JavaScript destructuring assignment detailed explanation

How to allow remote access to open ports in Linux

Web front-end skills summary (personal practical experience)

Solve the problem that MySQL read-write separation causes data not to be selected after insert

JavaScript implements simple scroll window

Docker installs the official Redis image and enables password authentication

How to introduce pictures more elegantly in Vue pages

Solution to the problem that input in form cannot be submitted when disabled

Independent implementation of nginx container configuration file