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

whlutmcx 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(112)

我试图创建自己的网站与基本结构（页眉，主要和页脚），但当没有足够的元素，以填补屏幕的高度，页脚是不是放在底部。
为了解决这个问题，我使用了以下代码行：

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

但现在有足够的元素，应该滚动，页脚仍然固定（什么是显而易见的），所以我试图创建一个媒体查询，以改变页脚的css时，身体的高度大于100 vh-它是不工作的，我不知道为什么.我该如何修复它？

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

我知道我可以根据最终的结构选择其中的任何一个，但同时我想忘记手动更改页脚的css。
先谢谢你。

css

来源：https://stackoverflow.com/questions/75062119/using-a-media-query-with-viewheight-to-fix-footer

3条答案

按热度按时间

kd3sttzy1#

我明白你需要做什么，我提供给你使用集装箱Flex。

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

如果你使用这种结构，添加下面的样式，那么你将永远不需要添加位置固定和媒体查询页脚。

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

赞(0）回复(0）举报 2023-01-10

kknvjkwl2#

要使<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;
}

要分配<body>的空间，可以使用CSS Grid：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-10

c0vxltue3#

只需为整个站点的父元素编写一个属性：

min-height: 100%;

对于页脚之前的部分，需要注册以下属性：

flex-grow: 1;

它的默认值为"flex"为0 1 auto，这意味着. flex-grow：0;挠曲收缩：1;弹性基准：自动;

赞(0）回复(0）举报 2023-01-10

我来回答

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

3条答案

相关问题

热门标签

最新问答