带有粘性导航的 CSS 网格

【问题标题】：CSS grid with sticky nav带有粘性导航的 CSS 网格
【发布时间】：2019-02-27 23:41:56
【问题描述】：

我被 CSS 网格卡住了

我想做一个网页，有

粘性导航（带有top: 15px;）
全屏“场景”（它们占用了导航下方的剩余空间）。

所以nav和内容的高度应该是100vh

在每个场景中，前约 10% 是导航，其余的是内容

这是一个蓝图

【问题讨论】：

你写过一些 HTML 或 CSS 吗？也许你尝试的已经足够接近了，并且有一些建议可能会奏效。

标签： css responsive-design css-grid sticky

【解决方案1】：

如果以后有人看这个

main
    display: grid
    grid-template-rows: auto // height of nav
    grid-auto-rows: 100vh // fullscreen scenes

在粘性导航上

main
   // all props from above
   --nav-position-top: 15px
   padding-top: var(--nav-position-top)
nav
   position: sticky
   top: var(--nav-position-top)

【讨论】：