Three solutions to explain the bottom effect of website footer

Time:2020-1-10

Background of problem

A lot of website design generally consists of two parts: content + footer. Content contains the main content of the website, and the registration information of the website is displayed in the footer. Because the content of the website is highly uncertain, the following two situations will occur:

1. When the content is small, the footer is fixed at the bottom of the page. As follows:

2. When the content is long, the footer slides behind the content, which is roughly shown in the red box below:

This requirement is still very common on the PC side, and I have encountered this problem in my own application. Today, I summarize some methods to realize this layout.

Method 1 using JS calculation

Why did I use js control first? To be honest, when I first encountered this problem, I used JS to solve it directly (mainly because I knew that JS would definitely be implemented, so I didn’t spend time thinking about other methods)

The main idea is: calculate the screen height – the real height of content content after the page loading is completed, if the difference is greater than

For the height of the footer, add fixed positioning to the style of the footer to make it fixed at the bottom of the screen.

The demo code is as follows:

<!DOCTYPE html>
<html>
<head>
    < title > footer sink effect < / Title >
    <style type="text/css">
        div {
            margin: 0,
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #container {
            width: 100%;
            height: 100%;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
        }
        .footer-fixed {
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> content </div>

    <div id="footer">
        footer
    </div>
</div>

<script type="text/javascript">
    let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight;
    //Here, add another class to the footer to make it fixed
    if (height > 100) document.getElementById('footer').classList.add('footer-fixed');
</script>

</body>
</html>

Based on the principle that you can use CSS to solve the problem, you will never use js. Although this method is the easiest to think of, it is not recommended. Moreover, if you want to get clientheight from this CSS code, it will lead to page rearrangement and redraw. In terms of performance, it is not recommended.

Method 2: Flex layout + min height

The justify content: space between in the flex layout and the super easy-to-use min height can just meet the bottom effect of the footer when the content content is insufficient

The demo code is as follows:

<!DOCTYPE html>
<html>
<head>
    < title > footer sink effect < / Title >
    <style type="text/css">
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            //Key code
            //Although you do not know the height of the container, you can set a minimum height, which is good for layout
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> 
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
    </div>

    <div id="footer">
        footer
    </div>
</div>

</body>
</html>

Min height is really a super easy CSS attribute. With flex, you can easily achieve the bottom effect.

Method 3 using flex + margin top

This technique is learned from the wonderful use of margin auto. In the context of flex format, margin auto will automatically allocate the remaining space. In this case, we can use margin top: Auto on the footer to achieve the bottom effect.

<!DOCTYPE html>
<html>
<head>
    < title > footer sink effect < / Title >
    <style type="text/css">
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
            Margin top: Auto; // key code
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> 
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
    </div>

    <div id="footer">
        footer
    </div>
</div>

</body>
</html>

Summary: the above three methods have no side effects. In fact, there are other ways to achieve this kind of sink effect, but they have an impact on other layouts. I won’t go into details here. After that, we have a better solution, and then we will update it.

Recommended Today

Paper case CMS 3.3.6 release upgrade. Net 5

.Net 5 Microsoft’s. Net 5 has been released and we adapted it for the first time. The biggest change in the new version is to upgrade to Microsoft’s latest. Net 5, and the performance has been significantly improved. So please update your running environment before upgrading to 3.3.6. Upgrade Guide:http://www.zkea.net/zkeacms/document/upgrade Convenient update Paper shell CMS […]