CSS Grid如何实现前两行占满100vh 导航栏自适应高度粘性定位

无需给导航栏设置固定高度，通过调整Grid容器层级即可完全满足需求。

原有代码失效原因 #

原有写法将首屏内容包裹在固定高度为100vh的#layout容器内，导航栏的sticky定位参考元素是这个固定高度的父容器，页面滚动时父容器会整体移出视口，导航栏自然无法固定在视口顶部。

完整实现代码 #

CSS样式 #

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

/* 将body直接作为全局Grid容器 */
body {
  display: grid;
  /* 第一行：Hero区占满剩余首屏高度；第二行：导航栏高度自适应；后续行：正文高度随内容撑开 */
  grid-template-rows: 1fr auto auto;
  min-height: 100vh;
}

nav {
  background: lightgreen;
  padding: 0.5rem;
  /* 粘性定位相对于视口生效 */
  position: sticky;
  top: 0;
}

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

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

HTML结构 #

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

实现逻辑说明 #

• 移除额外的#layout嵌套容器，让Hero区、导航栏、正文内容全部处于同一DOM层级，满足sticky定位的生效前提
• Grid行配置中1fr会自动分配首屏剩余空间给Hero区，导航栏行设置为auto完全由内容撑开高度，不需要写死固定值，导航栏内容变化时高度会自动适配
• 首屏两行内容总高度刚好占满100vh，页面向下滚动时导航栏会固定在视口顶部，正文内容可以正常滚动浏览，完全匹配需求

内容的提问来源于stack exchange，提问作者BlueFrog