нужна помощь в дизайне сетки css с липкой навигацией - PullRequest
Новая
       53

нужна помощь в дизайне сетки css с липкой навигацией

0 голосов
/ 28 февраля 2019

Я застрял с сетками CSS

Я хочу сделать веб-страницу с

  • липкой навигацией (с top: 15px;)
  • во весь экран"сцены" (они занимают оставшееся пространство под навигацией).

Таким образом, высота навигации и содержимого должна быть 100vh

Так что на каждой сцене верхний ~10% - это навигация, а остальное - содержание

Вот схема, которую он enter image description here

Буду очень признателен, если кто-то сможетпомогите мне

Хорошего учебника по css-grid мне тоже будет достаточно:)

1 Ответ

0 голосов
/ 02 марта 2019

Если кто-нибудь 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)

Example

...