Unable to correctly pin this footer to the bottom of the viewport

November 30, 2021

I am trying to auto scroll the content, which is working. However, when I try to pin the footer to the bottom of the viewport, the content scrolls past the footer and the footer scrolls with the content.

If I remove the CSS for the footer element, the footer starts at the top, the content pushes it to the bottom, and the content auto-scrolls above the footer as expected. But the footer isn’t pinned to the bottom as I’m hoping.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hyperbole</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
</head>
<style>
    #content{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }
    footer {
        position: absolute !important;
        bottom: 0 !important;
        width: 100%;
    }


</style>
<body>
    <div class="container" id="cont">
        <header class="sticky"><h1>Header</h1></header>
        <div id="content"></div>
        <footer class="sticky"><h3>Footer</h3></footer>
    </div>
</body>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {

        history.scrollRestoration = "manual"
        window.scrollTo(0, document.body.scrollHeight)


        setInterval(()=>{

            var content = document.getElementById("content")
            var textnode = document.createElement("div")

            textnode.innerText = Math.random()
            content.appendChild(textnode)


            window.scrollTo(0, document.body.scrollHeight)

        }, 500)


    })

</script>
<html>

>Solution :

You need to use position: fixed instead of position: absolute. position: absolute takes the element out of the document flow and places it relative to the whole page. position: fixed also takes it out of the document flow, but places it relative to the viewport. You will again end up with content being hidden below the footer – to fix this, set a margin-bottom to the body that equals the height of your footer. Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hyperbole</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
</head>
<style>
    #content{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }
    footer {
        position: fixed !important;
        bottom: 0 !important;
        width: 100%;
    }
    
    body {
        margin-bottom: 80px;
    }
</style>
<body>
    <div class="container" id="cont">
        <header class="sticky"><h1>Header</h1></header>
        <div id="content"></div>
        <footer class="sticky"><h3>Footer</h3></footer>
    </div>
</body>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {

        history.scrollRestoration = "manual"
        window.scrollTo(0, document.body.scrollHeight)


        setInterval(()=>{

            var content = document.getElementById("content")
            var textnode = document.createElement("div")

            textnode.innerText = Math.random()
            content.appendChild(textnode)


            window.scrollTo(0, document.body.scrollHeight)

        }, 500)


    })

</script>
<html>

You might have to experiment with the margin value a bit, especially as your footer does not have a fixed height.