768px响应式视图下body设置overflow:hidden不生效问题咨询

数据老陈

2026-9-30

问题根本原因

未对html根元素做高度和溢出限制，仅给body设置overflow: hidden时，部分浏览器会将body的溢出规则向上传播给视口，导致裁剪规则失效
未给html、body设置height: 100%，绝对定位子元素的height: 100%没有正确的父级高度参照，实际渲染高度超出视口范围，出现纵向滚动条
body默认自带8px外边距，也会导致绝对定位元素的位置偏移，产生溢出

修复方案

首先在全局CSS中添加html、body的基础重置规则，再调整媒体查询内的溢出限制规则：

/* 全局基础重置，放在CSS最顶部 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.column {
  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: lightyellow;
}

.outer {
  width: 70%;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
}

.inner-1 {
  width: 100%;
  height: 50%;
  background-color: lightsalmon;
}

.inner-2 {
  width: 100%;
  height: 50%;
  background-color: lightblue;
}

@media screen and (max-width: 768px) {
  /* 同时给html、body设置溢出隐藏，避免规则传播失效 */
  html, body {
    overflow: hidden;
  }
  .column {
    width: 25%;
  }
  .outer {
    width: 75%;
    right: -100%;
  }
}