基于100%高度的16/9比例容器布局问题求助

我被这个问题困扰很久了，急需帮助。我有一个固定高度的容器wrapper（对应代码里的.container），内部包含一个带有header和div的容器（.container_inner）。其中ratio_div这个div需要在保持16/9比例的同时，占据最大的可用高度。

解决方案 #

利用CSS的aspect-ratio属性结合flex布局即可实现需求，以下是修改后的代码：

CSS代码 #

.container {
  display: flex;
  justify-content: center;
  height: 500px;
  border: 2px solid;
}
.container_inner {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  margin-block: 1rem;
  padding: 1rem;
  gap: 1rem;
  height: calc(100% - 2rem); /* 减去上下margin的总高度，确保内部高度正确 */
  box-sizing: border-box;
}

.header {
  height: 40px;
  min-width: 200px;
  border: 1px solid;
}

.ratio_div {
  border: 1px dotted black;
  flex-grow: 1;
  aspect-ratio: 16/9; /* 核心：固定16/9宽高比 */
  max-height: 100%; /* 限制高度不超出可用空间 */
  width: 100%;
}

HTML代码 #

<div class="container">
 <div class="container_inner">
  <div class="header"></div>
  <div class="ratio_div"></div>
 </div>
</div>

关键说明 #

• aspect-ratio: 16/9：直接定义元素的宽高比，现代浏览器均支持，简单高效。
• flex-grow: 1：让ratio_div自动占据container_inner中header以外的剩余空间。
• max-height: 100%：确保ratio_div不会超出分配的高度，当宽度足够时按比例显示；若高度受限，宽度会自动缩小以维持16/9比例。
• container_inner的height: calc(100% - 2rem)：抵消上下margin的高度，保证内部元素的可用高度准确，避免溢出容器。

旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的旧浏览器，可使用padding-top百分比的方法：

.ratio_div {
  border: 1px dotted black;
  flex-grow: 1;
  max-height: 100%;
  width: 100%;
  position: relative;
}
.ratio_div::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 9÷16=0.5625，对应16/9比例 */
  width: 100%;
}
/* 若ratio_div内有内容，需添加绝对定位 */
.ratio_div .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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