Adding <!DOCTYPE html> to my code breaks the stickyness of my footer

Question

Adding <!DOCTYPE html> to my code breaks the stickyness of my footer

334 views Asked by whatever At 07 December 2024 at 05:23

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.

Original Q&A

There are 1 answers

**s.kuznetsov** · Answer 1 · 2020-08-27T18:03:36+00:00

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>

TechQA.

Adding <!DOCTYPE html> to my code breaks the stickyness of my footer

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

Trending Questions