CSS Grid с фиксированным липким нижним колонтитулом и основным прокручиваемым разделом

Я пытаюсь использовать сетку CSS для создания заголовка, липкого нижнего колонтитула (который всегда будет виден на экране), а также навигационных и основных разделов, содержимое которых может расти, но у них есть полосы прокрутки (это достигается с помощью угловых компонентов)

формат макета

Вот как определяется моя сетка:

.container {
    display: grid;
    grid-template-columns: 15em auto;
    grid-template-rows: min-content 1fr min-content;
    height: 100%;
}

header,
footer {
    grid-column-start: 1;
    grid-column-end: 3;
}

html css css-grid grid sticky-footer
person Alex Dantsev    schedule 18.08.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хитрость заключается в том, чтобы поместить overflow-y: auto в те части, которые вы хотите прокручивать.

body {
  margin: 0;
}

.layout {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 25% 75%;
  overflow: hidden;
}

.header {
  background-color: red;
  grid-column: span 2;
}

.nav {
  background-color: green;
  overflow-y: auto;
}

.content {
  background-color: blue;
  overflow-y: auto;
}

.footer {
  background-color: purple;
  grid-column: span 2;
}
<div class="layout">
  <div class="header">Header</div>
  <div class="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="footer">Footer</div>
</div>

person Jannes Carpentier    schedule 18.08.2020
comment
Спасибо за развернутый ответ! Есть ли способ добиться этого без полос прокрутки? У моих компонентов уже есть полосы прокрутки, и у меня их два. Если я поставлю overflow-y: hidden; для ‹nav›, он попадает под нижний колонтитул. - person Alex Dantsev; 19.08.2020
comment
Поскольку div class="nav" и div class="content" уже прокручиваются, ваши компоненты в этом не нуждаются. Вы можете просто удалить прокрутку из этих компонентов. - person Jannes Carpentier; 19.08.2020