Using a media query with viewheight to fix footer-CodePudding

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.

CodePudding user response：

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

<div >
  <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;
  }

CodePudding user response：

To make <body> fill the whole page vertically:

html {
  height: 100% /*of viewport's height*/;
}
body {
  /* At least 100%;
   * allows vertical scrollbars if content overflows
   */
  min-height: 100%;

  /* Reset margin:
   * Margins don't count towards size.
   * If wanted, you'd need to explicitly subtract
   * them from size declarations.
   */
   margin: 0;
}

To distribute <body>'s space, you can use CSS Grid:

body {
  display: grid;
  grid-template-rows:
    auto /*First row: Take up required space*/
    1fr /*Middle row: Take up remaining space, after required space is allotted*/
    auto /*Last row: Take up required space*/;
}

/*Previous rules*/
html {height: 100%}
body {
  margin: 0;
  min-height: 100%;
}

/*Ignore; for presentational purposes*/
header, main, footer {
  min-height: 4rem;
}
header {background-color: cornflowerblue}
main {background-color: brown}
footer {background-color: darkkhaki}

<html>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

CodePudding user response：

just write a property for the parent element of the entire site:

min-height: 100%;

and for the section before the footer, you need to register the following property:

flex-grow: 1;

Its default value for 'flex' is 0 1 auto , which means. flex-grow: 0; flex-shrink: 1; flex-basis: auto;