Css 计算基于父宽度的Div周围Div的高度？

我有一个外部div，具有以下（压缩为仅显示相关）CSS属性：

.container{
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
}

在它里面我有三个div，上面一个包含介绍性文本，中间一个包含内容，下面一个用于访客评论。中间一个是照片幻灯片、视频剪辑、地图等。因此需要一个特定的纵横比，鉴于宽度是流动的，我使用以下（示例2:1）CSS：

通过使用零高度并使高度从%垂直填充开始，它会根据父对象的宽度动态创建其高度，然后顶部：50%；和转换：翻译（0，-50%）；将其放置在父分区的中心位置

我的问题是我想让这个上面和下面的div与上面和下面的剩余空间相匹配，我不知道如何计算它们的高度

我期待的最终结果是：

有人知道这是否可能（理想情况下使用纯CSS），如果可能，如何实现吗

---

非常感谢：）

就我而言，我希望我的屏幕在所有pc桌面浏览器、所有手机浏览器、所有Android手机和所有iPhone中都是一样的

因此，我将外部div高度设置为屏幕可用高度。我有3个内分区，上分区高度=屏幕高度/14，下分区高度=屏幕高度/14，中间分区高度=屏幕高度*12/14

---

我从来没有使用过像20px这样的东西，因为每个屏幕的20px都是不同的，所以我使用（屏幕高度/一些数字）px来代替

非常感谢@David Thomas为我指明了flex box的方向，我用它来整理它！如果其他人有相同的问题，请使用下面的解决方案

.videocontainer{    /* PARENT DIV - FLUID HEIGHT TO FILL VIEWPORT */
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
display:inline-flex;
flex-direction:column;
justify-content:center;
align-content:stretch;
align-items:stretch;
}

.videotext{    /* DIV HEIGHT FLUID TO FILL SPACE ABOVE */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}  

.videoplayer{    /* DIV HEIGHT FIXED RATIO TO WIDTH */
box-sizing:border-box;
width:calc(100% - 40px); 
margin-left:20px;   
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
}

.videocomments{    /* DIV HEIGHT FLUID TO FILL SPACE BELOW */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}

---

这在CSS中是不可能的，因为您实际上是在询问如何为给定元素的两个（一个在前一个和一个在后一个）同级元素设置样式，而CSS无法选择以前的同级元素。话虽如此，使用flex box可能是可行的；您能否显示本节的相关HTML？HTML如下：

.videocontainer{    /* PARENT DIV - FLUID HEIGHT TO FILL VIEWPORT */
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
display:inline-flex;
flex-direction:column;
justify-content:center;
align-content:stretch;
align-items:stretch;
}

.videotext{    /* DIV HEIGHT FLUID TO FILL SPACE ABOVE */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}  

.videoplayer{    /* DIV HEIGHT FIXED RATIO TO WIDTH */
box-sizing:border-box;
width:calc(100% - 40px); 
margin-left:20px;   
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
}

.videocomments{    /* DIV HEIGHT FLUID TO FILL SPACE BELOW */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}