CSS网格前两行占用100 up，一行自动大小

Question

我正在尝试使用网格进行布局，其中网格的前两行占用100vh，但是导航条是粘性的，高度未知。第三行是正文内容，可以滚动到。

初始布局可以很容易地实现，不需要粘粘，但是要让position: sticky使用导航条，所有元素都需要在相同的级别上。我不想依赖于肚脐的静态高度。

​

html,
body {
  margin: 0;
  padding: 0;
}

#layout {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

nav {
  background: lightgreen;
  padding: 0.5rem;
  position: sticky;
}

header {
  display: grid;
  place-content: center;
}

p {
  padding-inline: 0.5rem;
  padding-block: 3rem;
}

<div id="layout">
  <header>Hero</header>
  <nav>Sticky navbar</nav>
</div>

<p>Content you need to scroll down to see</p>
<p>More contnet</p>
<p>Even more contnet</p>
<p>So much contnet</p>
<p>wow</p>

​

因此，基本上，是否有任何方法来实现这种布局而不指定肚脐的高度？

Answer 1

将粘性元素设置为顶部和底部，然后可以将所有元素放在主体内：

​

body {
  margin: 0;
}

nav {
  background: lightgreen;
  padding: 0.5rem;
  position: sticky;
  top: 0;
  bottom: 0;
}

header {
  height: 100vh;
  display: grid;
  place-content: center;
}

p {
  padding-inline: 0.5rem;
  padding-block: 3rem;
}

<header>Hero</header>
<nav>Sticky navbar</nav>
<p>Content you need to scroll down to see</p>
<p>More contnet</p>
<p>Even more contnet</p>
<p>So much contnet</p>
<p>wow</p>

​