如何根据同胞元素尺寸计算元素尺寸?
问题描述:
我想找到一种方法来根据它的兄弟元素的高度来计算元素的高度。在下面的代码片段中,第一个和第三个孩子的高度为20%,最大高度为70px。我需要找到一种方法让孩子二来填充身高的其余部分,而不管容器大小如何,这是可变的height: calc(100vh - 12vmin - 40px);
。我已经尝试了媒体查询和calc()函数,但因为可变容器高度而不工作。我想我会需要使用JS,但没有它的任何解决方案都是可取的。如何根据同胞元素尺寸计算元素尺寸?
感谢您的帮助!
P.S.如果你有JS的解决方案,请使用vanilla JS。
#container {
border: 4px solid #000000;
box-sizing: border-box;
height: calc(100vh - 12vmin - 40px);
max-width: 600px;
width: 100%;
}
#childOne {
border: 2px solid blue;
box-sizing: border-box;
height: 20%;
max-height: 70px;
}
#childTwo {
border: 2px solid red;
box-sizing: border-box;
height: 60%;
}
#childThree {
border: 2px solid yellow;
box-sizing: border-box;
height: 20%;
max-height: 70px;
}
<div id="container">
<div id="childOne"></div>
<div id="childTwo"></div>
<div id="childThree"></div>
</div>
答
CSS Flexbox的是要走的路。
更改容器高度为height: 100vh
,加display: flex
和flex-direction: column
。
对于childTwo完全删除高度的设置,并添加flex:1
。
body {
margin: 0;
padding: 0;
}
#container {
border: 4px solid #000000;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
max-width: 600px;
width: 100%;
}
#childOne {
border: 2px solid blue;
box-sizing: border-box;
height: 20%;
max-height: 70px;
}
#childTwo {
border: 2px solid red;
box-sizing: border-box;
flex: 1;
}
#childThree {
border: 2px solid yellow;
box-sizing: border-box;
height: 20%;
max-height: 70px;
}
<div id="container">
<div id="childOne"></div>
<div id="childTwo"></div>
<div id="childThree"></div>
<div>
可以放回可变高度,这应该仍然工作。只要你在容器上设置了一定的高度(不是百分比,除非父母有一个高度),那么中间的div将填充剩余的空间。 – wlh