页面div元素顶部溢出问题求助：滚动异常及布局修复需求

嘿，我来帮你搞定这个flex布局导致的滚动问题！

问题根源分析 #

你遇到的两个问题本质上都是同一个原因：固定高度的flex容器+垂直居中布局限制了内容的滚动空间。

• .full-height类设置了height:100vh，让容器高度固定为视口高度，当内容展开后总高度超过视口时，容器不会自动扩展，导致顶部内容被挤出视口之外。
• .flex-center的align-items: center会把内容垂直居中，进一步加重了顶部内容被隐藏的问题——即使滚动条出现，你也没法滚到最顶部，因为容器本身就只有视口高度。

修复方案 #

只需要调整几个CSS属性，就能彻底解决问题：

修改后的CSS代码

html, body {
    background-color: #fff;
    color: #636b6f;
    font-weight: 100;
    min-height: 100vh; /* 把固定height改成min-height */
    margin: 0;
}

.slide-open {
    transition: all 1s ease;
}

.full-height {
    min-height: 100vh; /* 同样替换成min-height */
}

.flex-center {
    align-items: flex-start; /* 去掉垂直居中，改成顶部对齐 */
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.content {
    text-align: center;
}

.links>a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 10px;
}

.email>a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .2rem;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
}

关键修改点说明

1. min-height:100vh替代height:100vh：
   这样容器会至少占满视口高度，但当内容超过视口时，会自动拉伸容器高度，让滚动条能覆盖全部内容。
2. align-items: flex-start替代align-items: center：
   让内容从容器顶部开始排列，避免垂直居中导致顶部内容被挤出视口，同时保证标题始终紧贴页面顶部。

额外验证 #

修改后你可以测试两种场景：

• 点击按钮展开内容：页面会出现垂直滚动条，滚动到顶部能清晰看到标题，所有内容都能正常查看。
• 调整窗口大小：容器会自动适应内容高度，不会出现内容丢失的情况。

你的JS折叠/展开函数本身没有问题，只要容器高度能灵活扩展，就能正常工作啦！

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