根据寡妇大小调整内容 div 的大小，其余元素将保持不变

Question

我的页面上有三个垂直对齐的 div。第一个是页眉，第二个是内容，最后一个是页脚。即使我调整窗口大小，页眉和页脚也应该分别位于顶部和底部。但是，内容的大小应该根据窗口大小调整大小，并且它应该是可滚动的，并且需要在滚动时从上到下看到。

我在jsbin试过了

.container {
  display: grid;
  /* grid-template-rows: 1fr 5fr 1fr; */
}
.header {
  border: 2px solid red;
}

.content {
  border: 2px solid blue;
  min-height: 20rem;
  max-height: 30rem;
  overflow: auto;
}

.footer {
  border: 2px solid green;
}

如何解决这个问题。

Answer 1

我以前使用的方法是这样的：

// adding tempate area so element positions become rigid
// adding overflow: hidden to hide default scroll
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "page" "footer";
    overflow: hidden;
}

// giving grid-area of each element
.header {
    grid-area: header;
}

// height: 100%; and overflow: auto; so page can scroll
.page {
    grid-area: page;
    overflow: auto;
    height: 100%;
}
.footer {
    grid-area: footer;
}