I'm trying to create a layout that uses a grid that takes up the entire browser viewport (height: 100vh) and then allows a div within one of the grid items to scroll in the Y dimension.
Here's some example code. There are three grid areas: a header across the top, a left nav, and a content area in the lower right.
I'm trying to make it so div inside the content area (the big-list), is the only thing with a vertical scrollbar, and the rest of the UI stays on the screen.
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
