如何防止调整窗口或打开控制台时wrapper div发生位移？

给wrapper加宽高、最小宽高属性不生效，本质是位移触发逻辑和容器尺寸约束无关，按以下优先级排查修复：

• 先排查定位锚点缺失问题
  检查wrapper内部是否存在设置了position: absolute/position: fixed的子元素，如果父级wrapper没加position: relative，这类子元素会直接以浏览器视口为定位基准，调整窗口高度、打开控制台时视口尺寸变化，子元素就会跟着视口移位，和其他内容重叠。直接给wrapper加上position: relative，把内部定位元素的锚点锁定在wrapper内部即可。
• 排查视口单位的错误使用
  检查wrapper及内部元素的CSS规则，是否存在用vh作为高度、边距、偏移值的写法，比如height: 100vh、top: 70vh这类规则：vh单位会实时跟随视口高度重新计算，打开控制台时视口可用高度变小，如果元素同时设置了固定padding、margin，且没加盒模型约束，内容就会溢出容器造成重叠。
  修复时先给全局加高度基准：

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  

  需要占满容器高度的场景优先用height: 100%替代100vh；如果必须用vh单位，给对应元素加上box-sizing: border-box，把padding、border算入元素总尺寸，避免内容溢出。
• 排查弹性布局的默认收缩行为
  如果wrapper是flex/grid布局的子项，默认flex-shrink属性值为1，父容器空间不足时wrapper会自动被压缩，内部内容没有做适配的话就会重叠。给wrapper加上flex-shrink: 0禁止自动收缩即可；如果wrapper本身是flex容器，记得加上flex-wrap: wrap，允许子项在宽度不足时自动换行，不要硬挤在同一行。
• 排查硬编码的固定偏移值
  检查是否给元素写死了固定像素的偏移，比如margin-top: 650px、top: 500px这类为了适配初始页面高度写的硬编码值，一旦视口高度变小，固定偏移会把元素推到和其他元素重叠的位置。这类场景要改成流式相对偏移，不要用固定像素做跨尺寸的对位。

快速调试技巧：打开浏览器开发者工具，选中错位的wrapper元素，查看Computed（计算后样式）面板，拖动改变窗口高度时观察是哪个属性值在实时变动，就能直接定位到触发位移的CSS规则，不用盲目试错加属性。

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