Flexbox布局中hero-row溢出height:100vh的header-box问题求助

开发者阿泽

2026-9-26

问题根因

你设置了height: 100vh的.header-box未启用Flex布局，内部nav-row和hero-row的高度是独立计算后累加，总高度超过100vh就会溢出
.hero-row没有设置高度限制，内部图片容器的padding、图片自身宽高比都会把容器撑高，之前加的overflow: hidden因为父元素没有明确高度限制所以无法生效

修复方案

直接修改对应CSS代码即可，无需调整HTML结构：

/* 1. 给header-box添加flex垂直布局 */
.header-box {
    background-color: grey;
    color: black;
    margin: 0 auto;
    height: 100vh;
    display: flex; /* 新增 */
    flex-direction: column; /* 新增 */
}

/************* Nav Bar **************/
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6rem;
    flex-shrink: 0; /* 新增，防止导航栏被压缩 */
}
.nav-ul {
    font-family: 'bold';
    list-style: none;
    display: flex;
}
.nav-item {
    margin-left: 7rem;
    cursor: pointer;
}

/************* Logo **************/
.logo {
    font-family: 'scbold';
    font-size: 2rem;
    cursor: pointer;
}

/******************* Hero Starts ************************/
.hero-row {
    font-family: 'bold';
    display: flex;
    width: 100%;
    overflow: hidden;
    flex: 1; /* 新增，自动占满header-box剩余高度 */
}
.hero-content {
    flex: 0 0 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
}
.hero-azamat {
    flex: 0 0 50%;
    overflow: hidden;
    padding: 10%;
    display: flex; /* 新增，方便内部图片对齐 */
    align-items: center;
    justify-content: center;
}
.azamat-icon {
    width: 100%;
    height: 100%; /* 新增 */
    object-fit: contain; /* 新增，图片等比缩放适配容器，不会变形 */
}
.hero-description {
    font-size: 1.5rem;
    padding-right: 25%;
    margin: 5% 0 10%;
    letter-spacing: 0.01rem;
}