使用带有 viewheight 的媒体查询来修复页脚

Question

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.但是现在有足够的元素并且应该滚动，页脚仍然固定（很明显）所以我试图创建一个媒体查询来更改页脚的 css 当身体的高度大于 100vh - 它不起作用同时我不知道为什么。 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.我知道我可以根据最终结构选择其中任何一个，但同时我想忘记必须手动更改页脚的 css。

Thank you in advance.先感谢您。

Answer 1

I understand what you need to make and I offer you to use flex on container.我明白你需要做什么，我建议你在容器上使用 flex。

<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.如果您使用此结构，请在 styles 下面添加，那么您将永远不需要将 position 固定和媒体查询添加到页脚。

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

Answer 2

To make <body> fill the whole page vertically:要使<body>垂直填充整个页面：

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>的空间，您可以使用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>

Answer 3

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' 的默认值为 0 1 auto，这意味着。 flex-grow: 0;弹性增长：0； flex-shrink: 1;伸缩收缩：1； flex-basis: auto;弹性基础：自动；

使用带有 viewheight 的媒体查询来修复页脚

问题描述

3 个解决方案

解决方案1
1 已采纳 2023-01-09 19:37:46

解决方案2
0 2023-01-09 20:05:21

解决方案3
0 2023-01-09 20:31:04

使用带有 viewheight 的媒体查询来修复页脚

问题描述

3 个解决方案

解决方案1 1 已采纳 2023-01-09 19:37:46

解决方案2 0 2023-01-09 20:05:21

解决方案3 0 2023-01-09 20:31:04

解决方案1
1 已采纳 2023-01-09 19:37:46

解决方案2
0 2023-01-09 20:05:21

解决方案3
0 2023-01-09 20:31:04