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

Vue implements button switching picture

This article example shares the specific code of ...

A great collection of web standards learning resources

These specifications are designed to allow for bac...

Vue3+Element+Ts implements basic search reset and other functions of the form

After switching from Vue2's writing style to ...

mysql workbench installation and configuration tutorial under centOS

This article shares the MySQL Workbench installat...

How to create a project with WeChat Mini Program using typescript

Create a project Create a project in WeChat Devel...

How to configure Basic Auth login authentication in Nginx

Sometimes we build a file server through nginx, w...

JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain

Table of contents JS Three Mountains Synchronous ...

How to connect to virtual machine MySQL using VScode in window environment

1. Virtual Machine Side 1. Find the mysql configu...

Detailed explanation of MySQL database--multi-table query--inner join, outer join, subquery, correlated subquery

Multi-table query Use a single select statement t...

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

Detailed example of changing Linux account password

Change personal account password If ordinary user...

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Table of contents 1. ChildNodes attribute travers...

Detailed explanation of the reasons why MySQL connections are hung

Table of contents 1. Background Architecture Prob...

Modify the style of HTML body in JS

Table of contents 1. Original Definition 2. JS op...

Pay attention to the order of TRouBLe when writing shorthand properties in CSS (to avoid pitfalls)

Shorthand properties are used to assign values ​​...