CSS 网格布局动态调整大小

Question

我有一个带有工作区和两个页脚的网格布局。所有这些元素都在 CSS 中设置了resize: vertical。当我调整工作区（顶部元素）的大小时，网格容器本身会很好地调整大小。但是，当我调整页脚大小时，有两个问题：

1. 网格容器的大小保持不变，不会扩展/收缩。
2. 另一个页脚的大小没有改变，因此要么页脚开始相互重叠，要么它们之间出现空白。

期望的行为：

1. 调整页脚 1 的大小时，页脚 2 会展开/收缩
2. 调整页脚 2 的大小时，网格容器本身会展开/收缩

我假设我需要一些 JavaScript 来实现所需的行为？

.grid-container {
    display: grid;
    border: 3px dotted red;
    grid-gap: 3px;
    grid-template-rows: 1fr 200px 200px;
    grid-template-columns: 1fr;
}

.workspace {
    grid-row-start: 1;
    grid-row-end: 1;
    border: 3px dotted blue;
    resize: vertical;
    overflow:scroll;
    height:200px;
}

#chart {
    height:1000px;
    width:1000px;
}

.footer1 {
    grid-row-start: 2;
    grid-row-end: 2;
    border: 3px dotted blue;
    overflow: scroll;
    resize: vertical;
}

.footer2 {
    grid-row-start: 3;
    grid-row-end: 3;
    border: 3px dotted blue;
    overflow: scroll;
    resize: vertical;
}

<div class="grid-container">
  <div class="workspace">
    <div id="chart"></div>
  </div>

  <div class="footer1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue placerat odio sed fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse luctus velit ipsum, vitae finibus metus auctor ut. Nullam ac elit quis turpis consectetur ultricies in consectetur massa.
  </div>
  <div class="footer2">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div>
</div>

Answer 1

经过几次测试，出现了问题。如果您设置1fr 1f 1fr，grid-template-rows 的定义会很棘手，第一个容器指示两个页脚元素的高度，并且它们的高度调整大小不会影响网格单元格的大小。回答您的第一个问题，如果您将其设置为auto 1fr 1fr，主容器将独立调整大小并且网格将调整，并且第一个页脚指示第二个页脚的高度。当您要调整第二个页脚的大小时，问题就开始了，并且由于单元格需要处于相同的高度，因此出现了一些问题。没有直接的解决方案，但可以考虑移至 flex-box 或将所有行设置为 auto。