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

Html – Footer is on top. Any solutions without adding a wrapper?

How to make a footer always pressed to bottom?

Whenever I make a new page and there’s still no content, considering that my header is fixed, my footer always jumps to top. I want to get rid of this behavior. Maybe there’s a solution without adding a wrapper for , and and something that isn’t considered a bad practice. If there’s no such solution, please, at least give a solution with a wrapper/flexbox.

here red is the footer that’s hiding under a fixed header: https://phpout.com/wp-content/uploads/2023/11/qtVKL.png

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this issue by adding a wrapper class to <main> and specified min-height: 100vh;


  2. 0

    If you have a little content, try avoid “shrinking” of element.

    body {
  display: flex;
}

Content {
  flex: 1;
}

footer {
  flex-shrink: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search