考虑到网格布局中第一行的高度，我可以有一个全高的第二行吗？

Question

我有两个全宽行。第一个具有顶部和底部填充，因此它具有高度。另一个必须是全高减去第一个的高度。

我使用了 CSS 网格布局（即使我只有一列，出于个人原因我也不想使用 flexbox 布局）：

.main {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    grid-template-areas:
        'menu'
        'section_1';
}

.menu {
    grid-area: menu;
}

.section_1 {
    grid-area: section_1;
}

我希望将1fr 替换为允许我的第二行（名为section_1）的全高减去menu 的高度而不使用calc(100vh - <menu_height>)。可能吗？我已经尝试过1fr，但它当然不能用于此目的。

Answer 1

在澄清之前完成评论：

fr 表示分数，因此您需要设置两个元素的分数比例，js 会在这里为您提供帮助...但是如果您不设置任何行模板，则无需设置。你能用足够的代码来说明使用 sn-p 来证明你的问题吗？如果您在.main 上设置height，它也可以完成这项工作

你在找这个吗：

body {
  margin: 0;
}

main {
  height: 100vh;/* missing in your code */
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  grid-template-areas: 'menu' 'section_1';
}

nav {
  grid-area: menu;
}

section {
  background: #bee;
  grid-area: section_1;
}

<main>
  <nav> a nav</nav>
  <section> a section </section>
</main>