html - 使用调整大小功能跟踪不缩小

Question

我想用 CSS grid 模拟拆分 Pane 行为但是当我缩小“顶部”可调整大小的 div 时，“底部”div 不会上升，在顶部和底部 div 之间留下难看的空隙。

我对 Brave 0.70.122(基于 Chromium 78.0.3904.87)和 Firefox 71(如果重要的话，都在 Ubuntu 64 位上)都有问题。

如何让两个 div 填满整个可用空间？是否有我不知道的可以设置的 CSS 属性？我可以设置 grid-template-rows: auto 1fr; 但这会将顶部 div 设置为最小尺寸，我希望它最初设置为 75%(但随后底部 div 不会增长超过剩余的 25%)。

div {
  /* To visualize boundaries */
  border: 1px solid;
}

#main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 3fr 1fr;  /* 3/4 split */
}

#top {
  grid-area: 1 / 1 / span 1 / span 1;
  resize: vertical;
  overflow: auto;
}

#bottom {
  grid-area: 2 / 1 / span 1 / span 1;
}

<div id="main">
  <div id="top">Top</div>
  <div id="bottom">Bottom</div>
</div>

Answer 1

看起来一旦浏览器呈现轨道大小(在本例中为 3fr 1fr)，它们就会变成固定长度。所以resize工具只能缩小track的内容，不能缩小track本身。

尝试不同的方法。

代替这个:

#main {
  grid-template-rows: 3fr 1fr;
}

试试这个:

#main {
  grid-template-rows: auto 1fr;
}

#top {
  height: 75vh;
}

#main {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

#top {
  height: 75vh;
  resize: vertical;
  overflow: auto;
  background-color: lightgreen;
}

#bottom {
  background-color: orangered;
}

body {
  margin: 0;
}

<div id="main">
  <div id="top">Top</div>
  <div id="bottom">Bottom</div>
</div>

jsFiddle demo