У меня есть следующая сетка, которую я хочу охватить точно по высоте экрана - не меньше, не больше.В сетке у меня есть фиксированный заголовок (один), фиксированный нижний колонтитул (три) и прокручиваемый контент (два)
.grid-container {
display: grid;
grid-template-areas:
"one"
"two"
"three"
;
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
Что происходит, если содержимое внутри two становится слишком большим,высота всей сетки теперь больше, чем область просмотра.В результате мой нижний колонтитул выталкивается вниз, а вместо этого я хотел бы прокрутить содержимое и сохранить нижний колонтитул там, где он есть.
Я знаю, что могу добиться того, чего хочу, с помощью position: fixed, но этоурезанный пример более сложной сетки.Любая помощь приветствуется, я предпочитаю придерживаться подхода сетки, если это возможно.Я собрал скрипку для вашего удобства.Спасибо!
https://jsfiddle.net/x6stfc01/1/
HTML Для вашего удобства
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<div style="height: 5000px"></div>
End of Content
</div>
<div class="three"></div>
</div>