CSS Sticky Footer Implementation Code

CSS Sticky Footer Implementation Code

This article introduces the CSS Sticky Footer implementation code and shares it with you. The details are as follows:

The effect shown in the figure above is the sticky footer. When the page content is not long enough, the footer is positioned at the bottom of the window. When the page content exceeds the window, the footer is displayed at the bottom of the page.

Here are several implementation solutions:

1. FlexBox Layout

The HTML structure is as follows:

<body>

    <div class="header">Sticky Footer</div>

    <div class="content">

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

        <p>Test test test test test test test test test test test test test test test test test test test test test test test</p>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

The main CSS is as follows:

body{

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content{

    flex: 1;

}

FlexBox is so simple to implement, the effect is also posted

The effect of the map doesn’t seem to be very good, but the effect is achieved! ! ! !

2. Classic routine: padding-bottom + margin-top

The HTML structure is as follows:

<body>

    <div class="wrapper clearfix">

        <div class="title">Sticky Footer</div>

        <div class="content">

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

The main CSS is as follows:

.wrapper{

    min-height: 100vh;

}

.content{

    padding-bottom: 50px;

}

.footer{

    height: 50px;

    margin-top: -50px;

}

Implementation effect (I feel like I need to install a screen recording software):

Keep the following in mind when using this solution:

1. The minimum height of the wrapper must be equal to the window height

2. The absolute values ​​of the three property values ​​of content's padding-bottom, footer's margin-top and height must be consistent (because margin-top is a negative value, so it is an absolute value); the reason for keeping consistency is to better implement the sticky footer. Although the sticky footer effect can be achieved if the height is relatively small, there will be a gap at the bottom.

3. This solution has good compatibility with all major browsers. Emmmmm, not bad

4. When the main body uses a floating layout, you need to consider a compatibility issue. The focus here is on Google Chrome.

The fourth compatibility solution mentioned above:

Add the famous clearfix hack to .wrapper:

.clearfix{

    display: inline-block

}

.clearfix:after{

    display: block

    content: "."

    height: 0

    line-height: 0

    clear: both

    visibility: hidden

}

3. Fixed height solution

The HTML structure is as follows:

<body>

    <div class="wrapper">

        <div class="header">Sticky Footer</div>

        <div class="content">

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

            <p>Test test test test test test test test test test test test test test test test test test test test test test test test</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

The main CSS styles are as follows:

.wrapper{

    min-height: calc(100vh - 50px);

    box-sizing: border-box;

}

Note: 50px is the height of the footer. A space needs to be left before and after the calc() operator.

I won’t post the results, you can just use your imagination, they are pretty much the same as above. . .

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.

<<:  Some points on using standard HTML codes in web page creation

>>:  Details of using Vue slot

Recommend

Linux server quick uninstall and install node environment (easy to get started)

1. Uninstall npm first sudo npm uninstall npm -g ...

Solution to the conflict between two tabs navigation in HTML

Let's start with a description of the problem...

Understanding MySQL Locking Based on Update SQL Statements

Preface MySQL database lock is an important means...

Detailed explanation of the example of exporting data from a specified table in MySQL

Detailed explanation of MySQL exporting data from...

The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 36)

Data backup and restoration part 2, as follows Ba...

How to install ionCube extension using pagoda

1. First install the pagoda Installation requirem...

How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Through JavaScript, we can prevent hyperlinks fro...

About the IE label LI text wrapping problem

I struggled with this for a long time, and after s...

Sharing tips on using scroll bars in HTML

Today, when we were learning about the Niu Nan new...

Solve the problem of using linuxdeployqt to package Qt programs in Ubuntu

I wrote some Qt interface programs, but found it ...

A Brief Analysis of Subqueries and Advanced Applications in MySql Database

Subquery in MySql database: Subquery: nesting ano...

Element Plus implements Affix

Table of contents 1. Component Introduction 2. So...

Teach you to quickly build a web cluster project based on nginx

Table of contents 1. Project Environment 2. Proje...

VMware installation of CentOS virtual machine and configuration network graphic tutorial

1. Download the CentOS image 1.1 Download website...

Docker volume deletion operation

prune To use this command, both the client and da...