Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        header,
        section,
        footer {
            float: left;
            position: relative;
            text-align: center;
            width: 100%;
        }

        header {
            background-color: red;
            padding: 30px 0;
        }

        section {
            align-items: center;
            background-color: grey;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            height: 300px;
            transition: height .3s ease-in-out;
        }

        button {
            border: none;
            cursor: pointer;
            padding: 10px 30px;
        }

        footer {
            background-color: green;
            bottom: 0;
            padding: 30px 0;
            position: absolute;
        }

    </style>
</head>
<body>
    <header>Eu sou um header</header>
    <section>
        Eu sou uma section
        <button type="button">Clique aqui para aumentar a section</button>
    </section>
    <footer>Eu sou um footer</footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(() => {
            aumentaSetion()
        });

        const button = document.querySelector('button')
        const section = document.querySelector('section')
        const footer = document.querySelector('footer')

        function aumentaSetion() {
            button.addEventListener('click', function(e) {
                section.style.height = "1000px"

                setTimeout(() => {
                    resizeFooter()
                }, 500);
            })
        }

        function resizeFooter() {
            const sectionHeight = section.offsetHeight
            const bodyHeight = window.innerHeight

            if( sectionHeight > bodyHeight ) {
                footer.style.position = "relative"
                footer.style.bottom = "unset"
            }

            console.log("Section Height: " + sectionHeight)
            console.log("Body Height: " + bodyHeight)

        }
    </script>
</body>
</html>