CSS Sticky Footer Several Implementations

CSS Sticky Footer Several Implementations

What is "Sticky Footer"

The so-called "Sticky Footer" is not a new front-end concept and technology. It refers to a web page effect: if the page content is not long enough, the footer is fixed at the bottom of the browser window; if the content is long enough, the footer is fixed at the bottom of the page. But if the web page content is not long enough, the bottom footer will remain at the bottom of the browser window.

Let's take a look at the following example. The code is as follows

<div class="header">
    </div>
<div class="main">
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>bottom</div>
</div>
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow:auto;
    box-sizing: border-box;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

Careful readers should have discovered the problem. The footer position will automatically change with the height of the main content. When the main content is smaller than the viewport height, the footer is not attached to the bottom. So how to solve this problem?

negative margin

<div class="main">
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>bottom</div>
</div>

html,
body {
    height: 100%;
}
.header{
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    position: fixed;
    width: 100%;
}
.main {
    min-height: 100%;
    overflow:auto;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom: -50px;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

Fixed height solutions

Use the following properties

  • min-height
  • calc
  • v

calc() was introduced in CSS3 and allows you to perform calculations when declaring CSS property values.

It can be used in some numerical situations; for details, please refer to MDN here

vh (Viewport Height): As you can imagine, it represents the height of the viewport.

Detailed information and compatibility can be found here: caniuse

Modify the above code as follows

.main {
    min-height: calc(100vh - 50px - 50px);
}

This accomplishes what we expect, but one drawback is that we have to calculate the height of the header and footer every time.

This is obviously not perfect. If the DOM structure has more levels, more content needs to be calculated.

absolute

I believe everyone is familiar with absolute, so I won't go into details here; just pay attention to this: on what basis is the position of an absolute element calculated and positioned?

<div class="header">
    Header
<div class="main">
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
    <p>Middle part</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>bottom</div>
</div>
html{
    position: relative;
    min-height: 100%;
}
body{
    margin-bottom: 50px;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow:auto;
}

.footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

The code is very simple, here is the main position application:

1 By default, when an element is set to position:absolute, if the ancestor element does not have position: absolute or fixed or relative set

, it defaults to being relative to the initial containing block.

2 What initializers contain blocks?

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;

This is the W3C introduction to the containing block. The general meaning of this paragraph is that the root element (document) is the default initial containing block, and the size of its initialization block is the size of the viewport.

After understanding these concepts, let's look at the above code and it will be clear at a glance!

    html{
        position: relative;
        min-height: 100%;
    }

    body{
        margin-bottom: 50px;
    }
  • position:relative changes the containing block so that the absolute element is positioned relative to the html element.
  • min-height: ensures that the footer can stick to the bottom when the content is not enough for the viewport.
  • The margin-bottom value is the height of the footer element, which ensures that the content area will not be covered by the footer.

Flexbox

Flexbox is the perfect solution. It can be achieved with just a few lines of CSS, and doesn’t require calculating or adding additional HTML elements like above.

Modify the code as follows:

<div class="container">
    <div class="header">
        </div>
    <div class="main">
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
        <p>Middle part</p>
    </div>
    <div class="footer">
        <i class="fa fa-copyright" aria-hidden="true"></i>
        <div>bottom</div>
    </div>
</div>
html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.main {
    overflow:auto;
    box-sizing: border-box;
    flex: 1;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

The final effect is as follows:

negative =margin, fixed width, and absolute all rely on the bottom height being fixed.

It is generally recommended to use the absolute and flex implementations; the specific one to use depends on the specific scenario.

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.

<<:  The difference between html Frame, Iframe and Frameset

>>:  MySQL GTID comprehensive summary

Recommend

CSS easily implements fixed-ratio block-level containers

When designing H5 layout, you will usually encoun...

MySQL 4 methods to import data

1. Import mysql command The mysql command import ...

How to enhance Linux and Unix server security

Network security is a very important topic, and t...

Detailed explanation of Vue's front-end system and front-end and back-end separation

Table of contents Overview Front-end knowledge sy...

There is an extra blank line after the html page uses include to import the php file

The method found on the Internet works The footer ...

Turn web pages into black and white (compatible with Google, Firefox, IE and other browsers)

Write to the css file Copy code The code is as fol...

How to modify the location of data files in CentOS6.7 mysql5.6.33

Problem: The partition where MySQL stores data fi...

Why is it not recommended to use index as key in react?

1. Compare the old virtual DOM with the new virtu...

Sample code for making desktop applications with vue + Electron

1.vue packaging Here we use the vue native packag...

Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS

Installing MySQL 5.7 from TAR.GZ on Mac OS X Comp...

Nofollow makes the links in comments and messages really work

Comments and messages were originally a great way...

Docker container accesses the host's MySQL operation

background: There is a flask project that provide...

WeChat Mini Program QR Code Generation Tool weapp-qrcode Detailed Explanation

WeChat Mini Program - QR Code Generator Download:...

Example of viewing and modifying MySQL transaction isolation level

Check the transaction isolation level In MySQL, y...

Detailed explanation of the pitfalls of add_header in nginx configuration tutorial

Preface add_header is a directive defined in the ...