为什么我的 CSS 网格没有使用所有可用空间？答案

【问题标题】：Why isn't my CSS grid using all available space?为什么我的 CSS 网格没有使用所有可用空间？
【发布时间】：2020-10-07 04:27:38
【问题描述】：

我有以下简单的布局：

body {
    height: 100%
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 100px 1fr 100px;
}

.header{
    background: red;
}

.content{
    background: blue;
}

.footer{
    background: yellow;
}

<body>
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="content">
      content
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</body>

从我读到的内容来看，这应该会给我一个位于视口顶部的页眉、一个位于视口底部的页脚和一个占据其余部分的内容区域。相反，我得到了一个预期大小的页眉和页脚，以及一个自动调整大小以适应其内容的内容区域。

【问题讨论】：

看起来正确。尝试将 body 的高度改为 height: 100vh;。

标签： angular css-grid

【解决方案1】：

您的身体高度需要为100vh; 否则内容不会缩放到窗口的全高

body {
  height: 100vh;
}

【讨论】：

【解决方案2】：

height:100% 仅在父元素高度为 px 时才有效。

所以，而不是使用

.container {
   height: 100%;
}

使用

.container {
   height: 100vh;
}

vh 和 vw 是 css3 中引入的特殊单位。阅读本文以获得更好的参考https://www.smashingmagazine.com/2016/05/fluid-typography/

【讨论】：

【解决方案3】：

height: 100% 规则不适用于容器，因为 body 不是完整的视口高度，而是将min-height 与视口高度单位一起使用。

body {
  min-height: 100vh;
}

【讨论】：

谢谢！我发现我还需要去 index.html 中的根容器并使其高度为 100%