隐藏滚动条时出现底部外边距塌陷及div边距显示异常问题求助

这个视觉偏差的核心在于CSS中margin百分比的计算规则：所有方向的margin百分比值，都是基于父元素的宽度来计算的，而非高度。再加上你给body设置了overflow:hidden，进一步放大了这个问题：

1. 水平方向的margin:5%是视口宽度的5%，视觉上符合你的预期；
2. 垂直方向的margin:5%同样是视口宽度的5%——当你的视口宽度远大于高度时（比如宽屏显示器），这个值在高度方向的占比会远小于5%；
3. 更关键的是，当垂直方向的margin加上元素的min-height:90%总高度超过body的100%高度时，overflow:hidden会裁剪掉超出部分，让垂直margin看起来比实际设置的更小。

这里有几个简单有效的修复方案，你可以根据自己的需求选择：

方案1：使用视口单位（vh/vw）精确控制边距 #

视口单位vh是视口高度的1%，vw是视口宽度的1%，用它们来设置margin，可以让上下左右的边距分别基于视口的高度和宽度计算，完全符合你的预期：

html, body { 
  height: 100%; 
  margin: 0; 
  background-color: silver; 
  overflow: hidden; 
}
.top { 
  width: 90%; 
  min-height: 90%; 
  margin: 5vh 5vw; /* 上下边距为视口高度的5%，左右为视口宽度的5% */
  background-color: black; 
}

方案2：使用绝对定位替代margin #

通过绝对定位的top/right/bottom/left属性，可以直接让元素距离父元素边缘5%，不受margin百分比规则的影响：

html, body { 
  height: 100%; 
  margin: 0; 
  background-color: silver; 
  overflow: hidden; 
  position: relative; /* 让子元素的绝对定位基于body */
}
.top { 
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  bottom: 5%;
  background-color: black; 
}

这个方案的好处是元素的尺寸会自动填满5%边距后的剩余空间，不需要手动设置宽高。

方案3：使用Flex布局居中元素 #

用Flex布局让body成为容器，通过justify-content和align-items实现元素居中，同时设置元素的宽高为90%，间接实现5%的边距：

html, body { 
  height: 100%; 
  margin: 0; 
  background-color: silver; 
  overflow: hidden; 
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.top { 
  width: 90%; 
  height: 90%; /* 这里用height替代min-height，确保占满90%高度 */
  background-color: black; 
}

这个方案代码简洁，是现代布局的常用方式，适合不需要复杂定位的场景。

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