隐藏body滚动后div滚动内容在175%缩放时无法完全显示的解决办法

问题原因 #

固定的50rem高度在浏览器缩放时，无法适配实际视口的可用空间，加上body隐藏滚动条后，超出视口的部分无法通过页面滚动弥补，导致div内容被截断。

解决方案 #

• 先重置body的默认内外边距，避免布局偏移：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

• 将div的固定高度改为基于视口的单位（vh），确保它始终适配当前视口的可用高度：

div {
    height: 100vh; /* 占满整个视口高度 */
    overflow-y: auto;
    box-sizing: border-box; /* 确保内边距不会撑开高度 */
}

• 如果div需要留出顶部/底部空间，可以用calc()调整高度：

div {
    height: calc(100vh - 2rem); /* 减去2rem的上下边距 */
    overflow-y: auto;
    box-sizing: border-box;
    margin: 1rem;
}

额外说明 #

使用vh单位会让元素高度随视口实时变化，无论浏览器如何缩放，都能保证div的高度不超出当前可视区域，结合overflow-y:auto就能让所有内容通过滚动完整显示。如果必须使用rem，可以配合媒体查询针对高缩放比例调整div高度，但vh的适配性更优。

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