how to keep footer at the bottom of content and stick at the bottom on viewport

Question

I'm using bootstrap 4.5 for my Django project. I want my footer to be:

1- at the bottom of the content if contents are larger than viewheight

2- at the bottom of the viewport if the contents are smaller than viewheight

exactly as this:

here is what I have tried so far based on SO answers to similar questions,

is base.html:

<style>
#page-container {
    position: relative;
}

#content-wrap {
     padding-bottom: 2.5rem;   /* Footer height */
}

#footer {
    position: absolute;
    bottom: 0 !important;
    width: 100%;
}
</style>

<body style="position:relative;">

        <div id="page-container">

            <div id="content-wrap">
              <!-- all other page content -->
              {% include 'partials/_navbar.html' %}

              <div >
                {% block content %}  {% endblock %}
              </div>

            </div>

            {% include 'partials/_footer.html' %}
        </div>

</body>

in _footer.html

<footer class="page-footer font-small blue-grey lighten-5 mt-auto" id="footer" >
    ....
</footer>

but the result is either the first image(left) or it gets sticky to the bottom of the page no matter how much tall contents get.

your image are used in this answer: https://stackoverflow.com/a/59071640/8620333 — Temani Afif, Jan 10 '21 at 08:06
@TemaniAfif actually its from [freecodecamp](https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/) — Shahriar.M, Jan 10 '21 at 08:09
I meant that you will find your solution there since the issue is the same illustrated with the same image (before you argue the duplicate is not suitable ...) — Temani Afif, Jan 10 '21 at 08:11

Mhd Alaa Alhaj · Answer 1 · 2021-01-10T08:19:06.737

You forgot a little thing which is min-height: 100vh;, it's necessary if the content are smaller than the viewport:

#page-container {
  position: relative;
  min-height: 100vh;
}

UPDATE

Check the following snippet, I've just added min-height: 100vh;;

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
     padding-bottom: 2.5rem;   /* Footer height */
}

#footer {
    position: absolute;
    bottom: 0 !important;
    width: 100%;
    background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body style="position:relative;">

        <div id="page-container">

            <div id="content-wrap">
              <!-- all other page content -->
              {% include 'partials/_navbar.html' %}

              <div >
                {% block content %}  {% endblock %}
              </div>

            </div>

            <footer class="page-footer font-small blue-grey lighten-5 mt-auto" id="footer" >
 FOOTER
</footer>
        </div>

</body>

And here is a longer content:

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
     padding-bottom: 2.5rem;   /* Footer height */
}

#footer {
    position: absolute;
    bottom: 0 !important;
    width: 100%;
    background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body style="position:relative;">

        <div id="page-container">

            <div id="content-wrap">
              <!-- all other page content -->
            

              <div style="height: 1000px;background: green">
                
              </div>

            </div>

            <footer class="page-footer font-small blue-grey lighten-5 mt-auto" id="footer" >
 FOOTER
</footer>
        </div>

</body>

didnt help! with `#footer { position: absolute; }` it puts the footer on top of screen, with `position: relative;` it is still like the first image. — Shahriar.M, Jan 10 '21 at 08:04

how to keep footer at the bottom of content and stick at the bottom on viewport

1 Answers1