CSS注册页面窗口缩放后内容无法完整滚动，求修复方案

问题根源 #

你用position: absolute结合transform实现容器居中，当浏览器窗口高度小于容器总高度时，容器会被视口上下截断，再加上body未设置足够的高度和滚动规则，导致超出部分无法滚动查看。

两种解决方案 #

方案1：给body和容器添加滚动相关样式 #

修改body的CSS，确保内容超出视口时能触发滚动：

body {
    background-color: rgba(0, 0, 0, 0.932);
    color: #fff;
    min-height: 100vh; /* 保证body至少占满视口高度 */
    overflow-y: auto; /* 垂直方向内容超出时显示滚动条 */
}

同时给容器设置最大高度限制，避免完全超出视口范围：

.container {
    display: flex;
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(44, 44, 44);
    padding: 20px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.100);
    max-height: 90vh; /* 容器最大高度不超过视口的90% */
    overflow-y: auto; /* 容器内部内容超出时允许滚动 */
}

方案2：用Flexbox实现页面居中（更推荐） #

替换绝对定位方案，通过body的Flexbox布局实现居中，这种方式天然适配小屏幕，内容超出时自动触发页面滚动：

body {
    background-color: rgba(0, 0, 0, 0.932);
    color: #fff;
    min-height: 100vh;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 20px; /* 给容器留边距，避免贴紧屏幕边缘 */
}

.container {
    width: 350px;
    background-color: rgb(44, 44, 44);
    padding: 20px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.100);
}

这种写法更简洁，兼容性更好，无需处理绝对定位带来的溢出问题。

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