How do I keep the footer at the bottom of the page?

Question

How can I put the footer at the end of the page, but I don't mean sticking to the end of the window with the position, but rather this end of the page even though there is space above it. A solution with bootstap also helps me.

Does this answer your question? [How to keep footer at bottom of page?](https://stackoverflow.com/questions/17783937/how-to-keep-footer-at-bottom-of-page) — Dean Coakley, May 18 '20 at 23:45
take your pick: https://css-tricks.com/couple-takes-sticky-footer/ — Jon B, May 18 '20 at 23:59

CanUver · Answer 1 · 2020-05-19T00:09:36.720

I made these codes for you. This could be an idea for you. This method is one they can use.

Html:

<div id="container">
    <div id="main">
       // Main Content
    </div>
</div>

<footer class="footer">
  // Footer content
</footer>

Css:

    * {
    margin:0;
    padding: 0;
    }

    html,
    body {
        height: 100%;
    }

    #main {
        overflow: auto;
        padding-bottom: 100px;
    }

    #container {
        min-height: 100%;
    }

    .footer{
        background-color: black;
        height: 100px;
        margin-top: -100px;
        clear:both;
    }

score 0 · Accepted Answer · answered May 19 '20 at 00:18

That link describe how to get your footer under control https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

And example of solution with Bootstrap 4

<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

How do I keep the footer at the bottom of the page?

2 Answers2