body元素无法铺满全屏，用100vh致相对定位元素异常求助

问题原因 #

• 默认状态下，html元素的高度由内容撑开，并未设置为视口全屏高度，因此即便body清除了内外边距，高度也只会跟随自身内容，无法铺满整个屏幕。
• 直接给body设置height:100vh会将其高度强制固定为当前视口高度，当页面内容超出视口时，body不会自动延伸，导致内部相对定位元素的布局参考高度被限制，进而引发布局异常。

可行解决方案 #

方案1：同时设置html与body的高度属性

html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: black;
  color: white;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  height: 100%;
  min-height: 100%; /* 可选，确保内容超出视口时body能自动拉伸 */
}

• 逻辑：先让html占满视口高度，body继承该高度；添加min-height:100%可保证当内容超过视口时，body高度能随内容延伸，不会限制内部元素的布局空间。

方案2：用min-height:100vh替代height:100vh

body {
  background-color: black;
  color: white;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  min-height: 100vh;
}

• 逻辑：min-height:100vh确保body至少覆盖整个视口高度，当页面内容增多时，body会自动向下扩展高度，不会固定死高度，从而避免相对定位元素因父容器高度受限而出现布局异常。

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