0

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.

valfer
  • 3
  • 1
  • Media queries on pages query the viewport, so querying the viewport with viewport units is... unusual. Also, you are querying the _width_ against a length in `vh` (viewport _height_) unit. – Oskar Grosser Jan 09 '23 at 19:38

3 Answers3

1

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;
  }
Dev Guy
  • 26
  • 4
  • Hi, thanks for answering!! It seems to work! I will take a deeper look later. Thank you very much. Could you give me a short explanation about what flex: 1 does? – valfer Jan 09 '23 at 19:50
  • 1
    Sure, flex: 1 makes the section take all rest spaces, it means main section will have all spaces except header and footer. – Dev Guy Jan 09 '23 at 19:52
  • Yes, I forgot that part, after that it works really good. (I edited my previous comment haha) – valfer Jan 09 '23 at 19:54
0

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>
Oskar Grosser
  • 2,804
  • 1
  • 7
  • 18
0

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;

AndreyDerets
  • 39
  • 7
  • Hi Andrey, so if I am understanding it properly, if I add a second section after main (and before the footer), adding flex: 1 to main wont keep footer at bottom when total height is lower than 100vh, right? – valfer Jan 10 '23 at 19:21
  • Well, in the question you indicated only 3 sections, if you add something after the main section, then the min-height property: 100vh; specify the last section before the footer – AndreyDerets Jan 11 '23 at 07:13