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

Solution to the problem of z-index not taking effect in CSS3

Recommend

React internationalization react-i18next detailed explanation

Introduction react-i18next is a powerful internat...

Example of creating circular scrolling progress bar animation using CSS3

theme Today I will teach you how to create a circ...

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Last night I wrote an essay about the browser ren...

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

Solution to the problem of z-index not taking effect in CSS3

MySQL learning notes: data engine

How to configure nginx+php+mysql in docker

How to install nginx in docker and configure access via https

Use of Linux file command

CSS stacking and z-index example code

Detailed explanation of a method to rename procedure in MYSQL

Quickly solve the problem of slow and stuck opening of input[type=file]

Solution to using html2canvas to process Dom elements with Baidu map into images

In-depth understanding of React Native custom routing management

Recommend

React internationalization react-i18next detailed explanation

Example of creating circular scrolling progress bar animation using CSS3

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Detailed explanation of SRIOV pass-through configuration and performance testing based on KVM

Detailed Analysis of Event Bubbling Mechanism in JavaScript

CSS shadow animation optimization tips

Solutions for building ping and nfs in embedded Linux development environment

CSS scroll-snap scroll event stop and element position detection implementation

Docker Tutorial: Using Containers (Simple Example)

Better-scroll realizes the effect of linking menu and content

Summary of methods to prevent users from submitting forms repeatedly

Mini Program Custom TabBar Component Encapsulation

How to implement Docker container self-start

JS realizes picture digital clock

Introduction to Sublime Text 2, a web front-end tool