How to make footer stick to bottom without using absolute positioning?

Question

I want to stick the footer to the bottom of my page, My normal approach is just using column flex but that doesn't work so I searched online, I saw some answers people were saying using position:absolute; this fixes the problem, while it did but it also came with a problem, when the content was more than the 100vh entire screen, the footer would stay at its position instead of coming down with the page content.

Does this answer it? https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?rq=1 — see sharper, Aug 19 '21 at 04:25
Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Shahryar Mohajer, Aug 19 '21 at 04:29
Do you want two things: 1. if the content doesn't fill the viewport then the footer is to be at the bottom of the viewport (not up a bit just below the short content) and 2. if the content fills the viewport the footer to be directly below the content - i.e. not visible until the user scrolls)? — A Haworth, Aug 19 '21 at 06:07

score 0 · Answer 1 · answered Aug 19 '21 at 04:27

0

You can try:

position: fixed;
left: 0;
bottom: 0;
width: 100%;
opacity: 0;

answered Aug 19 '21 at 04:27

René

141
1
6

score 0 · Answer 2 · answered Aug 19 '21 at 04:33

You can fix this issue using flex-box on the body like so, This will not make the footer fixed, but instead it will push the footer down the page even if the content is less than 100vh

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

Praveen Ezekiel · Answer 3 · 2021-08-19T05:08:41.403

using position:fixed would make your footer always stay in the same position and overflow content would go below it. you can use 2 div containers and use the first to put all your content in and set its min-height:90vh; and use the second container for footer ans set its

height:10vh;
position:relative;
bottom:0;
left:0;
right:0;

so the footer will always be pushed below the content since position is relative

run the code snippet

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .footer{
            height: 10vh;
            position: relative  ;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div style="min-height: 90vh;">
        <input type="button" name="copy" value="add new form" >
        <form id="form1" action=""><br>
          <label for="college">College</label><br>
          <input name="college" type="text" />

          <label for="degree">Degree</label><br>
          <input name="degree" type="text" /><br>

          <label for="discipline">Discipline</label><br>
          <input name="discipline" type="text" /><br>

          <label for="passout-year">Passout Year</label><br>
          <input name="passout-year" type="number" min="2000" max="2021" /><br>

          <input type="submit" value="Submit" /><br>
          <input type="button" value="delete form"  /><br>
        </form>
    </div>
    <div class="footer">
        tr
        <br>
        tr
        <br>
    </div>
</body>
</html>

How to make footer stick to bottom without using absolute positioning?

3 Answers3