Adding to my code breaks the stickyness of my footer

Question

Adding <!DOCTYPE html> is breaking my CSS only sticky footer meaning that as soon as I add it, the footer does not stick to the bottom of a web page anymore.

Following is a working example without the <!DOCTYPE html>.

Doing further tests I've noticed that when not declaring the page as HTML5 by adding the DOCTYPE statement, the div with CSS class wrapper is able to be stretched to take the full document height thus pushing the footer to the bottom. This is not happening when declaring the document as HTML5.

https://jsfiddle.net/muvwh4zn/

        body {
            background-color: #f0f0f0;
        }
        
        .navbar {
            background-color: #444;
            width: 100%;
        }

        .footer {
            background-color: #444;
            width: 100%;
            height: 50px;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        .wrapper {
            min-height: 100%;
            margin-bottom: -50px;
            padding: 0px 0px 80px 0px;
        }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

</head>

<body>

    <div class="container">

        <div class="wrapper">
            <header>
                <div class="row">
                    <div class="text-white-50 text-center navbar">
                        HEADER
                    </div>
                </div>
            </header>

            <br />

            <main>
                <div class="row">
                    BODY
                </div>
            </main>

        </div>

        <footer>
            <div class="row">
                <div class="align-middle py-3 text-white-50 text-center footer">
                    FOOTER
                </div>
            </div>
        </footer>

    </div>

</body>

</html>

Please also see my own comment just below for a possible solution to this issue.

JSFiddle includes an html5 doctype by default. You can check this by clicking on the dropdown that says 'html' in the top left. — Nate Levin, Aug 27 '20 at 17:57
@NateLevin in fact my footer is not working in JSFiddle and I could not understand why. That's exactly the reason. Thank you for bringing it to my attention. Have tried changing the type of document to HTML 4.0 but I suppose it won't work in JSFiddle. — whatever, Aug 27 '20 at 18:03
For anyone who might need it, as an alternative to what Sergey suggests, I found the explanation of that is needed to solve this issue in the following answer stackoverflow.com/a/33217026/5014665. In addition, to setting htmland body to height 100% (which I had done) you also need to do the same on every single immediate sibling element. In my case this would mean also setting container as having height 100%. – — whatever, Aug 28 '20 at 10:44

score 1 · Answer 1 · answered Aug 27 '20 at 18:03

Add flexibility to the container class. Your footer will always be pinned to the bottom.

https://www.w3.org/QA/2002/04/valid-dtd-list.html

.container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
}

        body {
            background-color: #f0f0f0;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .navbar {
            background-color: #444;
            width: 100%;
        }

        .footer {
            background-color: #444;
            width: 100%;
            height: 50px;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        .wrapper {
            min-height: 100%;
            margin-bottom: -50px;
            padding: 0px 0px 80px 0px;
        }

        .push {
            height: 50px;
            z-index: -1;
        }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">


</head>


<body>


    <div class="container">

        <div class="wrapper">

            <header>
                <div class="row">
                    <div class="align-middle py-3 text-white-50 text-center navbar">
                        header
                    </div>
                </div>
            </header>

            <br />

            <main>
                <div class="row">
                    BODY
                </div>
            </main>

        </div>

        <footer>
            <div class="row">
                <div class="align-middle py-3 text-white-50 text-center footer">
                    FOOTER
                </div>
            </div>
        </footer>

    </div>


</body>

</html>

Would you comment a bit more on your suggestion? How does adding those declarations to `container` make it more flexible. — whatever, Aug 28 '20 at 08:22
Hello. Yes, of course I'll tell you more. You need to add a container (with flex rules) to your css class, which is listed at the very top of my answer. Your `container` class is the parent of all blocks, which means that if you set the flex rule with `flex-direction column` to this class, then all blocks will be built in a column, and in order to distribute the inner blocks along the content (horizontally), you need to set the rule `justify-content space-between` And it is obligatory to indicate the height of 100% to occupy all the space in height. — s.kuznetsov, Aug 28 '20 at 08:44
Hello. if my answer helped you, then check the box to the left of my answer pls — s.kuznetsov, Aug 29 '20 at 12:27

Adding to my code breaks the stickyness of my footer

1 Answers1

Linked