容器超出屏幕显示异常求助：PHP+HTML+CSS页面布局问题

问题现象 #

使用PHP、HTML、CSS开发时，容器内元素较多时会超出屏幕显示异常；页面缩放到80%或减少内容后显示恢复正常。尝试过overflow: auto、min-height: 200px、display: flex、position: relative等方案均未解决，需求是内容较少时正常显示，内容较多时可通过页面滚动查看全部内容。

问题根源 #

当前body样式设置了height: 100vh和flex居中布局：

• height: 100vh会固定body高度为当前视口高度，当容器内容总高度超过视口高度时，容器会超出body范围，导致页面无法正常滚动。
• 页面缩放到80%时，内容总高度能适配视口，因此显示正常。

修复方案 #

方案1：页面整体滚动（匹配需求） #

修改body和container的CSS样式，让body随内容自动扩展高度，同时保留基础布局：

body {
    font-family: 'Marhey', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin: 0;
    display: flex;
    justify-content: center;
    /* 替换固定高度为最小高度，允许body随内容拉长 */
    min-height: 100vh;
    /* 上下内边距避免容器贴紧屏幕边缘 */
    padding-top: 20px;
    padding-bottom: 20px;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
    height: auto;
    /* 可选：限制容器最大高度，避免内容过多时容器过于冗长 */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

方案2：容器内部滚动（备选场景） #

若需容器始终居中显示，仅容器内部滚动，可保留body的居中设置，调整容器的高度限制：

body {
    font-family: 'Marhey', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
    /* 限制容器最大高度为视口高度减去上下内边距 */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

效果说明 #

• 方案1：内容较少时容器保持合理间距显示，内容过多时页面整体可滚动，完全匹配需求。
• 方案2：容器始终居中，仅内部内容可滚动，适合需要固定容器位置的场景。

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