嵌套16:9比例容器自适应布局实现问题求助

我来帮你搞定这个布局难题！你的外层容器已经实现了预期的16:9适配效果，但内层的问题出在没有正确处理动态文本和固定比例内容的空间分配——当前的绝对定位会让内容容器和文本区重叠，导致溢出。下面是具体的解决方案：

核心思路 #

用Flex布局来管理内层容器的垂直空间：让动态文本区占据自身需要的高度，剩下的空间全部交给绿色内容容器，同时用padding-top的经典技巧维持内容容器的16:9比例，确保它不会被挤压变形。

修改后的完整代码 #

HTML（结构不变，仅调整CSS） #

<div class="outer-container">
 <div class="inner-container">
 <div class="header-text">
 This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall. This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall. This is the header text. It can be any number of lines. It is dynamic text. It can be short or tall.
 </div>
 <div class="content-container">
 <div class="wrapper">
 This should always be 16:9 and fill all available height in the inner-container.
 </div>
 </div>
 </div>
</div>

CSS（关键修改标注） #

/* 外层容器：修复居中逻辑，添加溢出隐藏 */
.outer-container{
 background-color: #d5e4f3;
 width: 100vw;
 height: 56.25vw; /* 16:9比例 */
 max-height: calc(100vh - 200px); /* 减去页眉页脚高度 */
 max-width: calc((100vh - 200px) * 16 / 9); /* 用公式计算更准确，替代固定值355px */
 margin: 100px auto; /* 垂直方向的margin对应页眉页脚高度，实现居中 */
 overflow: hidden; /* 防止内层元素溢出外层 */
 box-sizing: border-box;
}

/* 内层容器：改用Flex布局分配垂直空间 */
.inner-container{
 padding: 9px 16px;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column; /* 垂直排列子元素 */
 box-sizing: border-box; /* 让padding包含在宽高内 */
}

/* 动态文本区：保持原有样式，自动占据所需高度 */
.header-text{
 background-color: #cab4d7;
 padding: 10px;
 margin-bottom: 8px; /* 可选：添加文本区和内容容器的间距 */
}

/* 内容容器：用flex:1占据剩余空间，padding-top维持16:9 */
.content-container{
 flex: 1; /* 占满内层容器剩余的全部空间 */
 width: 100%;
 position: relative;
 background-color: #bad79d;
 overflow: hidden; /* 防止内容溢出 */
}

/* 内容容器的内部包裹层：绝对定位覆盖整个容器 */
.content-container > .wrapper{
 padding: 10px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

/* 核心技巧：为内容容器添加padding-top实现16:9比例 */
.content-container::before{
 content: "";
 display: block;
 width: 100%;
 padding-top: 56.25%; /* 9/16=0.5625，即16:9比例 */
}

关键修改说明 #

1. 外层容器：去掉了冲突的position:absolute和top/bottom/left/right，改用margin:auto实现居中，同时用公式计算max-width更准确，添加overflow:hidden避免内层溢出。
2. 内层容器：启用flex-direction:column的Flex布局，让动态文本区和内容容器垂直排列，自动分配空间。
3. 内容容器：用flex:1占据剩余空间，通过伪元素的padding-top:56.25%强制维持16:9比例——这个技巧利用了padding百分比基于父元素宽度计算的特性，完美实现固定宽高比。
4. 全局盒模型：添加box-sizing:border-box确保padding不会让容器尺寸超出预期。

这样修改后，不管动态文本有多少行，都会挤压内容容器的可用空间，但内容容器始终保持16:9比例，且整个外层容器不会超出视口范围（减去页眉页脚高度），完全符合你的需求！

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