响应式视图缩小高度时图片消失的问题求助

问题描述 #

页面宽度响应表现正常，但缩小视图高度时，头部组件内的图片容器（.me）会逐渐消失，其他元素可正常适配视口高度变化。

相关代码 #

HTML代码

<div className="header">
    <div className="container header__container">
        <h5>Hello I'm</h5>
        <h1>John Doe</h1>
        <h5 className="text-light">Software Engineer</h5>
        <CTA />
        <HeaderSocials />

        <div className="me">
            <img src={ME} alt="me" />
        </div>
   
        <a href="#contact" className='scroll__down'>Scroll Down</a>
       
    </div>
</div>

完整CSS代码

.header {
    height: 100vh;
    padding-top: 7rem;
    overflow: hidden;
}

.header__container {
    text-align: center;
    height: 100%;
    position: relative;
}

.cta {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
}

.header__socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    left: 0;
    bottom: 15rem;
}

.header__socials::after {
    content: "";
    width: 1px;
    height: 2rem;
    background: var(--color-primary);
}

.me {
    background: linear-gradient(var(--color-primary), transparent);
    width: 22rem;
    height: 33rem;
    position: absolute;
    left: calc(50% - 11rem);
    margin-top: 4rem;
    border-radius: 12rem 12rem 0 0;
    overflow: hidden;
    padding: 1rem 3.0rem 1.5rem 1.9rem;
}

.scroll__down {
    position: absolute;
    right: -2.3rem;
    bottom: 18rem;
    transform: rotate(90deg);
    font-weight: 300;
    font-size: 0.9rem
}

/*MEDIA QUERIES (MEDIUM DEVICES)*/

@media screen and (max-width: 1024px) {
    .header {
        height: 100vh;
    }
    
}

/*MEDIA QUERIES (SMALL DEVICES)*/

@media screen and (max-width: 600px) {
    .header{
        height: 100vh;
    }
    .header__socials,
    .scroll__down{
        display: none;
    }
    
}

解决方案 #

1. 调整头部容器高度策略 #

将.header的固定高度改为最小高度，同时允许垂直滚动，避免内容超出视口时被截断：

.header {
    min-height: 100vh; /* 替换原height:100vh */
    padding-top: 7rem;
    overflow-y: auto; /* 内容超出时显示滚动条 */
}

2. 让图片容器自适应视口高度 #

用min()函数结合视口高度单位（vh），限制图片容器的最大高度同时适配小视口：

.me {
    background: linear-gradient(var(--color-primary), transparent);
    width: min(22rem, 80vw); /* 宽度同时适配小屏幕 */
    height: min(33rem, 70vh); /* 最大高度33rem，同时不超过视口70%高度 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 替代calc，更简洁的居中方式 */
    margin-top: 4rem;
    border-radius: 12rem 12rem 0 0;
    overflow: hidden;
    padding: 1rem 3.0rem 1.5rem 1.9rem;
}

3. 给容器底部预留空间 #

避免图片容器超出父容器范围，给.header__container添加底部内边距：

.header__container {
    text-align: center;
    min-height: 100%;
    position: relative;
    padding-bottom: 5rem; /* 预留底部空间，防止图片被截断 */
}

4. 针对小视口高度添加媒体查询 #

进一步优化小高度视口下的显示效果：

@media screen and (max-height: 600px) {
    .me {
        height: min(25rem, 60vh);
        margin-top: 2rem; /* 减少顶部间距 */
        padding: 0.5rem 2rem 1rem 1.5rem; /* 缩小内边距 */
    }
    .header {
        padding-top: 4rem; /* 减少头部内边距 */
    }
}

原因说明 #

原代码中.header使用固定height:100vh和overflow:hidden，当视口高度缩小时，图片容器的固定高度加上顶部的padding和margin，总高度超过了容器高度，导致图片被容器截断隐藏。通过改用最小高度、相对单位和媒体查询，让容器和图片能根据视口高度动态调整，避免内容被截断。

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