为何HTML同级元素无法保持相同高度？

问题根源 #

你之前的代码里，给#navbar和#content硬设了height:100%，但这个百分比是相对于父元素body的高度。而body默认高度由内容决定，当content内容超过视口时，body会被撑开，但navbar的height:100%还是取的html的视口高度，导致两者高度不一致。另外媒体查询里写错了选择器（#body应该是body），移动端布局切换也没生效。

直接解决方案 #

1. 删掉#navbar和#content的height:100%，靠Flex容器的默认拉伸特性让子元素自动填充满父容器高度。
2. 给body加min-height:100vh，保证内容少的时候页面占满视口，内容多的时候body自动撑开，两个子元素同步拉伸。
3. 修复媒体查询的选择器错误，给#navbar>ul加flex-grow:1让列表填满导航栏高度。

修改后的完整CSS代码 #

/* GENERAL*/
*{box-sizing: border-box;}
.flexbox{display: flex;}

html{
    font-size: .8vw;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    background-color: beige;
}

body{
    width: 100%;
    margin: 0;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh; /* 核心：确保body至少占满视口，内容多了自动撑开 */
}

@media(max-width:425px){
    body{ /* 修复之前的#body选择器错误 */
        flex-direction: column;
        align-items: center;
    }
}

/* NAVIGATION */
#navbar{
    background-color: palegreen;
    width: 10%;
    flex-direction: column;
    align-items: stretch;
    /* 去掉height:100%，让Flex自动拉伸 */
}

@media(max-width:1024px){#navbar{width:12%;}}
@media(max-width:768px){#navbar{width:14%;}}
@media(max-width:425px){#navbar{display: none;}}

#navbar>ul{
    list-style-type:none;
    background-color: palegreen;
    padding: 0;
    margin: 0; /* 去掉默认margin，避免顶部留白 */
    flex-grow: 1; /* 让列表填满导航栏的全部高度 */
}

#navbar>ul>li{
    display:block;
    font-size: 1.5rem;
    width: auto;
    padding: 15% 15% 15% 15%;
}

@media(max-width:1024px){#navbar>ul>li{font-size: 1.8rem;}}
@media(max-width:768px){#navbar>ul>li{font-size: 2rem;}}

/* CONTENT */
#content{
    width: 90%;
    flex-direction: column;
    /* 去掉height:100%，让Flex自动拉伸 */
}

@media(max-width:1024px){#content{width:88%;}}
@media(max-width:768px){#content{width:86%;}}
@media(max-width:425px){#content{width:100%;}}

#reel{
    width:60%;
    margin: 7% auto 0 auto;
}

@media(max-width:768px){#reel{width:70%;}}

#reel>img{
    width:100%;
    border-radius: 10px;
}

#quote{
    width:60%;
    background-color: palegreen;
    border-radius: 10px;
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    line-height: 150%;
    margin: 5% auto 2% auto;
    padding: 1%; /* 补充分号，修复语法错误 */
}

@media(max-width:1024px){#quote{font-size: 1.5rem;}}
@media(max-width:768px){#quote{font-size: 2rem;width:70%;}}
@media(max-width:425px){#quote{font-size: 3.3rem;}}
@media(max-width:375px){#quote{font-size: 3.5rem;}}
@media(max-width:320px){#quote{font-size: 4rem;}}

为什么这么改？ #

• Flex容器默认align-items: stretch，子元素会自动填充满父容器高度，不用硬设height:100%，硬设反而会限制拉伸。
• min-height:100vh比height:100%更灵活：内容少的时候占满视口，内容多的时候父容器自动撑开，子元素跟着长高，不会出现滚动时导航栏截短的问题。
• flex-grow:1让导航栏里的列表自动填满剩余高度，就算列表项少，导航栏的绿色背景也能铺满整个高度。

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