CSS网格具有固定的粘性页脚和主要可滚动部分

问题描述

我正在尝试使用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;
}

解决方法

诀窍是将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,sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="content">Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="footer">Footer</div>
</div>