如何根据同胞元素尺寸计算元素尺寸？

Question

我想找到一种方法来根据它的兄弟元素的高度来计算元素的高度。在下面的代码片段中，第一个和第三个孩子的高度为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>

Answer 1

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>