Блог

Главная - Вопросы по программированию - CSS сетка с фиксированным липким нижним колонтитулом и основным прокручиваемым разделом

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

#html #css #grid #css-grid #sticky-footer

#HTML #css #сетка #css-сетка #липкий нижний колонтитул

Вопрос:

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

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

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

 .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;
}

Ответ №1:

Хитрость заключается в том, чтобы поместить 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>

Комментарии:

1. Спасибо за ваш подробный ответ! Есть ли способ добиться этого без полос прокрутки? В моих компонентах уже есть полосы прокрутки, и в итоге у меня получается 2 из них. Если я добавлю overflow-y: hidden; для <nav> , он попадет под нижний колонтитул.

2. Поскольку div class="nav" и div class="content" уже доступны для прокрутки, вашим компонентам это не обязательно. Вы можете просто удалить прокрутку из этих компонентов.