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

Question

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

Try this: https://stackoverflow.com/a/34146411/15053790 – jdabtieu Aug 12 '22 at 23:00 — jdabtieu, Aug 12 '22 at 23:00

score 1 · Accepted Answer · answered Aug 12 '22 at 23:15

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.

thank you! this is my seconds project but yeah i better start working less chaotic before its too late — paul.sonnen, Aug 13 '22 at 00:55

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

1 Answers1