为何设置height:100%后#app未占满body，但其子元素却占满？

示例代码地址：https://codepen.io/sabeser/pen/ZEqpyjm

问题现象回顾 #

• 给#app设置了height:100%，但红色的#app容器未占满黄色的<body>
• 页面出现不必要的横向滚动条
• 取消#content-component的background-color: blue注释后，蓝色子容器看起来占满了整个<body>，但红色父容器#app仍未填满

核心原因 #

1. height:100%的局限性：html和body设置height:100%仅能让它们占满初始视口高度，当页面内容超过视口时，body会被内容撑开，但#app的height:100%是继承自body的初始视口高度，不会随内容自动扩展，所以<body>的黄色区域会露出来。
2. 横向滚动条的来源：#content-component设置了width:100%同时添加了padding:2em，默认盒模型下width不包含内边距，导致元素实际宽度为100% + 4em，超出父容器宽度，触发横向滚动。
3. 子容器“占满”的假象：当给#content-component添加背景色时，它作为flex:1的弹性项会填充#app的可用空间；而#app未设置overflow:hidden，当子容器内容超出#app高度时，背景色会随内容延伸，看起来像是占满了<body>，实际是内容溢出后的视觉效果。

解决办法 #

1. 让#app始终占满<body>

把#app的height:100%和min-height:100%替换为min-height:100vh，vh是视口高度单位，min-height:100vh保证元素至少占满视口，内容超出时自动扩展：

#app {
    width: 100%;
    min-height: 100vh; /* 替换原有高度设置 */
    background-color: red;
    display: flex;
    flex-direction: column;
}

2. 消除横向滚动条

给#content-component添加box-sizing:border-box，让width包含内边距和边框，避免宽度溢出：

#content-component {
    box-sizing: border-box; /* 添加该行 */
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    flex: 1 0 auto;
    font-size: 1.2em;
    padding: 2em;
    /* background-color: blue; */
}

也可以全局设置盒模型，避免重复编写：

* {
    box-sizing: border-box;
}

3. 确保父容器随内容扩展

用min-height:100vh替代height:100%后，#app会自动跟随内容高度扩展，不会再出现<body>黄色区域暴露的情况。

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