Search code examples
htmlcssscrollfooter

How exactly would i move the footer to the bottom of my scrolable page?

I want the footer to be on the end of the scrollable page -> i want to only see it when ive fully scrolled down. Tried around a bit but only got it to stick on the end of the first part of the loaded page -> the position was the bottom of the screen without having scrolled.

jsfiddle link

Solution

  • Your inline css threw me off for a second, but this should work:

    fiddle

    html {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#footer {
  padding-top: 8px;
  z-index: 13301;
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: aqua;
  font-weight: 400;
  font-size: 32px;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

    And I removed the inline stuff on article. Try not to use inline CSS if not absolutely necessary.

    Also your CSS is a bit chaotic.

    There is many ways to make a footer stick to the bottom, my solutions uses flexbox.