设置body为100vh后首子元素加margin-top导致无法占满全屏如何解决

问题原因 #

你遇到的是**外边距重叠（margin collapse）**问题，也常被称为margin塌陷：
当父元素（这里是<body>标签）没有设置上边框、上内边距，也没有触发BFC（块级格式化上下文）时，父元素和它的第一个子元素的上外边距会发生合并，合并后的外边距会作用在父元素的外侧。也就是说你给.hamburger设置的20pxmargin-top实际转移到了<body>标签上，导致整个<body>向下偏移了20px，所以看起来高度没有占满全屏。

解决方法 #

你可以任选以下任意一种方案修复，改造成本都很低：

• 给<body>添加极小的上内边距，阻断margin合并

  body {
    /* 原有样式保持不变 */
    padding-top: 0.1px;
  }
  

• 给<body>添加透明上边框实现阻断

  body {
    /* 原有样式保持不变 */
    border-top: 1px solid transparent;
  }
  

• 给<body>设置overflow属性触发BFC，内部margin不会外溢

  body {
    /* 原有样式保持不变 */
    overflow: auto;
  }
  

• 给<body>设置display: flow-root，这是专门用于触发BFC的属性，无额外副作用，主流浏览器均兼容

  body {
    /* 原有样式保持不变 */
    display: flow-root;
  }
  

• 也可以直接把.hamburger的margin-top:20px改成padding-top:20px，不过需要注意同步调整汉堡按钮的高度计算，避免元素变形。

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