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