如何让尺寸为450×800px的固定区域自适应匹配屏幕高度

你现有代码硬编码了内层目标div的固定高度800px，无法继承父容器的100%高度规则，因此不能跟随屏幕高度自适应。

方案1：宽度固定为450px，高度完全适配屏幕 #

适用于不需要保留原450×800宽高比，只要求宽度固定、高度撑满全屏的场景，直接修改内层div的高度属性即可，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <title>Page Title</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .full-height {
            height: 100%;
            background: yellow;
        }
        /* 可以把行内样式抽离为类方便维护 */
        .target-box {
            width: 450px;
            height: 100%;
            margin: 0 auto;
            background-color: #FD0F13;
            /* 内容超出高度时自动出现滚动条，避免布局错乱 */
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="full-height">
        <div class="target-box">
            I am a DIV that will stretch to fit the whole width and height of the browser window!
        </div>
    </div>
</body>
</html>

方案2：保留原450:800宽高比，高度适配屏幕的同时宽度等比缩放 #

适用于需要区域始终保持原设计比例的场景，使用aspect-ratio属性实现，核心修改点为目标div的样式：

.target-box {
    /* 高度撑满父容器 */
    height: 100%;
    /* 固定宽高比为450:800，宽度自动计算 */
    aspect-ratio: 450/800;
    margin: 0 auto;
    background-color: #FD0F13;
    /* 可选：限制最大宽度不超过原设计的450px */
    max-width: 450px;
}

• 移动端适配可以将高度单位替换为dvh，避免被浏览器地址栏、底部导航等系统UI遮挡
• 所有行内样式建议抽离到CSS样式表中，降低后续维护成本

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