0

I'm trying to implement a sticky footer. I have a simple test page which works perfectly - but only when the doctype is omitted. I've put both versions of the code below (the only difference is that one of them has the HTML5 doctype whilst the other doesn't).

The version WITH the doctype (this one doesn't work):

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        overflow-x: hidden;
    }
    footer {
        margin: -10px;
        padding: 20px;
        background-color: black;
        color: white;
        position: sticky;
        top: 100vh;
    }
</style>
</head>
<body>
    <main>
        <p>
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
        </p>
    </main>

    <footer>
        <div>About</div>
        <div>Products</div>
        <div>Reviews</div>
        <div>Feedback</div>
    </footer>

</body>
</html>

The version WITHOUT the doctype - this one works as expected:

<html>
<head>
<style>
    body {
        overflow-x: hidden;
    }
    footer {
        margin: -10px;
        padding: 20px;
        background-color: black;
        color: white;
        position: sticky;
        top: 100vh;
    }
</style>
</head>
<body>
    <main>
        <p>
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
            hui gyu gyu gyu gyu gy gy gyi ghi hio jopklkl; kl; jilo hui
        </p>
    </main>

    <footer>
        <div>About</div>
        <div>Products</div>
        <div>Reviews</div>
        <div>Feedback</div>
    </footer>

</body>
</html>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
Richard
  • 4,809
  • 3
  • 27
  • 46
  • 2
    Does this answer your question? [Adding to my code breaks the stickyness of my footer](https://stackoverflow.com/questions/63621668/adding-doctype-html-to-my-code-breaks-the-stickyness-of-my-footer) – César Venzac Aug 03 '23 at 08:44
  • If it doesn't work with a doctype, you are doing something wrong. Here's a quick fix: `body {min-height: 100vh; margin: 0;} main {overflow:hidden;}` – ralph.m Aug 03 '23 at 08:55
  • Do you actually want sticky, which acts as relative until the item gets to the given position when it becomes fixed, or do you want it at the bottom of the viewport all the time? – A Haworth Aug 03 '23 at 09:09
  • @a haworth : Similar to sticky - the first comment here linked to a URL which solved it. You can see the result on this page: https://dev.rgraph.net/blog/2023/happy-new-year-2023.html (if you zoom all the way out you'll see that the footer sticks to the bottom of the page even though there's plenty of whitespace. And at normal zoom it acts like a normal page footer. – Richard Aug 03 '23 at 20:37

0 Answers0