如何使元素调整大小并占用所有剩余的 space?
How can I make an element resize and take up all remaining space?
我有一个包含 3 个部分的网格。我想要的是中间的 "map" 部分可以调整大小,当它变得更小时 "points" 部分将扩展以占据所有剩余的 space.
#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>
不使用 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>
我有一个包含 3 个部分的网格。我想要的是中间的 "map" 部分可以调整大小,当它变得更小时 "points" 部分将扩展以占据所有剩余的 space.
#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>
不使用 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>