title: CSS- position footer at the bottom of the page
body: <p>I am trying to position footer at the bottom of the page, but not sticky. I have a problem when there is not enough content to cover the screen height, then the footer is not at the bottom. I have tried to set it up in CSS like this:</p>
  
  <pre><code>body {
    position: relative;
    margin: 0;
    padding-bottom: 8rem;
    min-height: 100%;
    overflow-x: hidden;
  }
  
  footer {
    position: absolute;
    display: flex;
    align-items: center;
    height: 4rem;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $gray;
  }
  </code></pre>
  
  <p>With this footer is only at the bottom of the page when there is enough content on it. But, when there is not enough content then it is above the bottom. Here is the example:
  <a href="https://i.stack.imgur.com/CBMhj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBMhj.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/m6mhsyky/2/" rel="nofollow noreferrer">Here</a> is the fiddle.</p>
  
  <p>When I add to the css file, like suggested in the answers:</p>
  
  <pre><code>html, body {
    height: 100%;
  }
  </code></pre>
  
  <p>Then, I have a problem with pages where there is alot of content, then the footer is at the bottom on page load, but when I start to scroll down, it goes up with the content, like shown in the image:<a href="https://i.stack.imgur.com/kw8ed.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kw8ed.png" alt="enter image description here"></a></p>