Search code examples
javascriptcssmedia-queriesfooter

Using a media query with viewheight to fix footer

I am trying to create my own website with a basic structure (header, main and footer) but when there are not enough elements to fill the height of the screen, footer is not placed at the bottom.

To fix that problem I used these lines:

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

but now that there are enough elements and should be scroll, the footer still fixed (what is obvious) so I am trying to create a media query to change footer's css when the height of the body is larger than 100vh - and it is not working and I do not know why. How can I fix it?

@media screen and (min-width: 100vh) {
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
}

I know that I could choose any of them depending on the final structure but meanwhile I would like to forget about having to change the footer's css manually.

Thank you in advance.

Solution

  • I understand what you need to make and I offer you to use flex on container.

    <div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

    If you use this structure, add below styles then you will never need to add position fixed and media query to footer.

    .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  main {
    flex: 1;
  }