I have a probably really simple question, but I can’t figure it out. My footer don’t stick to the bottom of the screen.

I have tried diffrent ways to get it down to the bottom but the only one i’ve gotten to work is non relative ones, which get kind of dumb when you resize the browser.

So here is a JsFiddle with my entire website: https://jsfiddle.net/4zakntdj/

And this is the HTML and css for only the footer:

      <footer id="footer">
        <p id="footer-text">Lorem ipsum dolor sit amet consectetur.</p>
        <div id="credits">
          <p>
            Credits:
            <br />
            Valdemar - Projektledare
            <br />
            Sidney - King kong
            <br />
            Vincent - King hemsida
            <br />
            Adam - nä
          </p>
        </div>
      </footer>

#footer {
  position: absolute;
  top: 250%;

  width: 100%;

  padding-bottom: 6rem;

  background-color: #727365;

  text-align: center;

  font-family: "Roboto Slab", serif;

  font-size: 1.2rem;
}

#footer-text {
  margin-top: 2rem;
}

#credits {
  margin-top: 2rem;
}

Hope you can find a way to make it stick to the bottom no matter the viewport. 🙂

>Solution :

Change the top: 250% to bottom: 0;, and the position: absolute to position: relative, like this:

#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding-bottom: 6rem;
    background-color: #727365;
    text-align: center;
    font-family: "Roboto Slab", serif;
    font-size: 1.2rem;
}