footer moves up with the content

[attilatoth86]

If the content is not long enough the footer moves up, potentially into the middle of the page. Is there a way to keep it in the bottom even if the site content does not fill up the available space?

[rarestoma]

Hello,

Sorry for the late response.

Please do the following changes: In the css files add these lines: .main-content{ min-height:100vh; } .footer{ position: absolute; width: 95%; bottom: 0; height: 0%; }

Please let me know if I can help you with anything else.

All the best, Rares

[bartek-dec]

Hello The above solution doesn't work when the page is full of content. In that case, the footer covers content. Is there a way to keep footer at the bottom even if the site content does not fill up the available space (as asked by attilatoth86) and keep footer below the content when the page is filled up?

[mudenho]

.main-content{ min-height:100vh; } .footer{ position: absolute; width: 95%; bottom: 10px; height: 0; } Add padding to the dive before the footer padding-bottom: 20px

[hridoy100]

This code worked for me...

<footer id="footer-main" 
    style="clear: both;
    position: relative;
    margin-top: -50px;">
</footer>

StackOverflow Reference

[dan-whitehouse]

The only thing I'd suggest differently is setting the width to 97%, it seems to line up with the end of the container. Also, I used .pb-4 on the div before my footer.

<style>
    .main-content{ min-height:100vh; }
    .footer{ position: absolute; width: 97%; bottom: 10px; height: 0; }
</style>

<div class="container-fluid mt--6">
    <div class="row pb-4"></div>
    <footer class="footer"></footer>
</div>

[attilatoth86]

thank you all, it worked.