绝对定位父元素下子元素高度占比自适应实现方案（任意缩放/分辨率）

核心解决方案 #

利用Flex布局结合固定比例设置，确保三个元素在任意缩放、分辨率下保持25%/50%/25%的高度占比，以下是修改后的完整代码及属性说明：

<div id="parent" class="flex-grow-1" style="position: absolute; display: flex; flex-direction: column; top: 0; left: 0; right: 0; bottom: 0;">
    <div style="background-color:yellow; flex: 0 0 25%;">A</div>
    <div style="background-color:green; flex: 0 0 50%; overflow: auto;">B</div>
    <div style="background-color:red; flex: 0 0 25%;">C</div>
</div>

关键CSS属性说明 #

父元素补充属性

• display: flex：必须添加，因为flex-direction: column仅对Flex容器生效，这是实现垂直比例布局的基础。
• top: 0; left: 0; right: 0; bottom: 0：让绝对定位的父元素占满其包含块的全部空间，为子元素的百分比高度提供明确的参考基准（若父元素已有明确宽高，可按需调整）。

子元素属性设置

• 元素A：
  • flex: 0 0 25%：固定占父元素高度的25%，flex-grow:0避免被拉伸，flex-shrink:0避免被压缩，严格维持比例；Flex垂直布局默认从上到下排列，自然置顶。
• 元素B：
  • flex: 0 0 50%：固定占父元素高度的50%，位于A和C之间，自动处于中间位置。
  • overflow: auto：当列表内容超出元素高度时，自动生成垂直滚动条，保证内容可滚动访问。
• 元素C：
  • flex: 0 0 25%：固定占父元素高度的25%，在Flex布局中排在最后，自然置底。

替代方案（直接设置高度） #

如果更倾向于直观的百分比高度写法，也可以将子元素的flex属性替换为height，效果一致：

<div id="parent" class="flex-grow-1" style="position: absolute; display: flex; flex-direction: column; top: 0; left: 0; right: 0; bottom: 0;">
    <div style="background-color:yellow; height: 25%;">A</div>
    <div style="background-color:green; height: 50%; overflow: auto;">B</div>
    <div style="background-color:red; height: 25%;">C</div>
</div>

内容的提问来源于stack exchange，提问作者ripunjoym1998