如何使元素调整大小并占用所有剩余空间？答案

【问题标题】：How can I make an element resize and take up all remaining space?如何使元素调整大小并占用所有剩余空间？
【发布时间】：2017-09-28 18:59:25
【问题描述】：

我有一个包含 3 个部分的网格。我想要的是中间的“地图”部分可以调整大小，当它变小时，“点”部分将扩大以占用所有剩余空间。

#grid {
    display: grid;
    grid-template-rows: 1fr 6fr 2fr;
    grid-template-areas:
            "slider"
             "map"
             "points";
  width: 200px;
  height: calc(100vh - 10px);
}

.one {
  grid-area: slider;
  background-color: yellow;
}

.three {
  grid-area: points;
  background-color: green;
}

.resizeme {
  grid-area: map;
  resize: vertical;
  overflow: auto;
  background-color: orange;
  
}

<div id="grid">
  <div id="item1" class="one">hello1</div>
  <div id="item2" class="resizeme">you can resize me</div>
  <div id="item3" class="three">three</div>
</div>

【问题讨论】：

允许使用 JavaScript 吗？如果是，this 是一个好的开始吗？ doDrag 可以被覆盖并扩展上面/下面的部分

标签： html css resizable css-grid

【解决方案1】：

不要使用fr 作为可调整大小元素的高度，而是使用auto。然后根据需要在项目本身上设置一个最小高度。

#grid {
  display: grid;
  grid-template-rows: 1fr auto 2fr;
  grid-template-areas: "slider" "map" "points";
  width: 200px;
  height: calc(100vh - 10px);
}

.one {
  grid-area: slider;
  background-color: yellow;
}

.three {
  grid-area: points;
  background-color: green;
}

.resizeme {
  grid-area: map;
  resize: vertical;
  overflow: auto;
  background-color: orange;
  /* min-height: 50px; */
}

<div id="grid">
  <div id="item1" class="one">hello1</div>
  <div id="item2" class="resizeme">you can resize me</div>
  <div id="item3" class="three">three</div>
</div>

【讨论】：