а также
аюсь создать макет, который использует сетку, которая занимает весь видовой экран браузера (height: 100vh), а затем позволяет элементу div внутри одного из элементов сетки прокручиваться в измерении Y.
Вот пример кода. Есть три области сетки: верхний колонтитул, левая навигация и область контента в правом нижнем углу.
Я пытаюсь сделать так, чтобы div внутри области содержимого (big-list), это единственная вещь с вертикальной полосой прокрутки, а остальная часть пользовательского интерфейса остается на экране.
body {
margin: 0;
}
.outer-grid {
display: grid;
height: 100vh;
grid-template-columns: 180px 1fr;
grid-template-rows: min-content 1fr;
}
.top-bar {
grid-column-start: 1;
grid-column-end: 3;
border-bottom: 1px solid rgb(200, 200,200);
}
.header {
font-weight: bold;
margin: 8px;
}
.left-nav {
overflow-y: scroll;
padding: 8px;
border-right: 1px solid rgb(200, 200, 200);
}
#content {
padding-left: 8px;
padding-right: 8px;
}
#search {
width:100%;
}
.big-list {
overflow-y: scroll;
}
.big-list div {
padding: 8px 0;
border-top: 1px solid rgb(230,230,230);
}<body>
<div class="outer-grid">
<div class="top-bar">
<div class="header">Header</div>
</div>
<div class="left-nav">
<div>,Nav 1</div>
<div>Nav 2</div>
<div>Nav 3</div>
</div>
<div id="content">
<input id='search' type="text"/>
<div class='big-list'>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Row ... </div>
<div> Last Row </div>
</div>
</div>
</div>
</body>