title: Bootstrap footer element position bottom
body: <p>Within a HTML page I have made, I wanted to add a footer. I am making use of Bootstrap and in <a href="https://getbootstrap.com/examples/sticky-footer/" rel="nofollow">this example</a> it is shown that the footer element can be positioned to the bottom of the page without putting the footer element inside a container element (directly within the body element, below a container element).</p>
  
  <p>Whenever I try this myself, it looks like the element will be positioned to the bottom at first. But then I noticed on other pages (which were longer on content), the footer started appearing to the bottom of the browser instead of the body element. The effect is that the container element above the footer will show itself behind the footer and below without the footer going to the bottom of the body element.</p>
  
  <p><strong>Make sure to scroll in the following example of code I made:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body {
    overflow: scroll;
    background-color: tomato;
    /*The height is set so that an overflow: scroll; can happen, to reproduce
    my sitation. When the content of the body tag is too long, the browser will
    show a scroll bar and when scrolling down, the footer does not appear on the
    bottom anymore but somewhere in the middle or maybe even top side, depending on
    how long the body would become. */
    height: 300px;
    position: relative;
  }
  .container {
    background-color: yellow;
    /*This would be a dynamic number, when removing this property.
    If you do not really understand the idea I am talking about, try to change
    this value and see for yourself what happens (with the footer element).
    The height is set only for the sake of showing the issue. */
    height: 500px;
  }
  footer {
    background: #e0f2f7;
    position: absolute;
    bottom: 0;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="body"&gt;
    &lt;h2&gt;
      Foo
    &lt;/h2&gt;
    &lt;div class="container"&gt;
      asdasds
    &lt;/div&gt;
    &lt;footer&gt;sadasdsa&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What can I do to make my footer element behave just like the one in the <a href="https://getbootstrap.com/examples/sticky-footer/" rel="nofollow">Bootstrap example</a> (so that it will always stick to the bottom) and without having to put the footer element in a certain container element?</p>