如何仅设置父容器高度实现区块占满屏幕高度且不修改子矩形组件

实现方案 #

仅需要修改父容器的高度相关样式，完全不用调整矩形组件的尺寸、定位属性，即可适配屏幕高度：

• 首先给.ray106容器设置高度为视口高度100vh，通过aspect-ratio保持原有宽高比，再通过缩放属性让整体内容按比例适配，内部元素无需任何改动
• 把.component-1-1的固定高度改为100%，自动撑满父容器高度

修改后的完整代码 #

<html>
<head>
<style>
.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  min-height: 100vh; /* 新增：让居中容器撑满视口高度 */
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

* {
  box-sizing: border-box;
}
.ray106 {
  background-color: #ffffff;
  /* 移除固定高度740px，替换为视口高度适配规则 */
  height: 100vh;
  aspect-ratio: 360 / 740; /* 保持原有宽高比 */
  transform: scale(calc(100vh / 740)); /* 按视口高度比例缩放整个容器，内部元素同步缩放 */
  transform-origin: top center; /* 缩放基点设为顶部居中，避免位置偏移 */
}

.ray106 .component-1-1 {
  background-color: #463af2;
  border: 1px solid #707070;
  height: 100%; /* 替换固定高度740px，自动撑满父容器 */
}

.ray106 .rectangle-2 {
  background-color: #f61a1a;
  border: 1px solid #707070;
  height: 677px;
  left: 33px;
  position: relative;
  top: 31px;
  width: 292px;
  /* 此处完全没有修改原有矩形的任何属性 */
}
</style>
</head>
   <body style="margin: 0; background: #ffffff; min-height: 100vh;"> <!-- 新增body高度撑满视口 -->
    <input type="hidden" id="anPageName" name="page" value="ray106" />
    <div class="container-center-horizontal">
      <div class="ray106 screen">
        <div class="component-1-1">
          <div class="rectangle-2"></div>
        </div>
      </div>
    </div>
  </body>
</html>

效果说明 #

• 矩形的宽高、相对父容器的top/left定位完全保留原有数值，没有任何改动
• 仅通过父容器的高度适配和比例缩放实现了整体容器适配屏幕高度，不会出现内容溢出或比例变形问题

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