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

Posted 2023-03-05

【中文标题】根据寡妇大小调整内容 div 的大小，其余元素将保持不变

【英文标题】：resize the content div based on the widow size and remaining elements will be remain same

【发布时间】：2021-12-05 11:02:07

【问题描述】：

我的页面上有三个垂直对齐的 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;

如何解决这个问题。

【问题讨论】：

到底是什么问题？什么部分必须是可滚动的？

content div 在调整窗口大小时裁剪一些内容@Wimanicesir

【参考方案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;

【讨论】：

在不使用 grid-area 和 grid-template-areas 的情况下还有其他方法吗？

是的，使用display: flex;flex-direction: column;，和flex-grow: 1应该有同样的效果