Question 45141 in Html Question posted in
Some basic documentation can be found here.

Footer not sticking to the bottom of the screen – Html

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. 🙂

Tags:

2

Answers


  1. 0

    Try to add the css rule:

    footer
{
    position: absolute;
    bottom: 0;
    height: fit-content;  
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search