100vh在笔记本电脑上超出视口的问题修复求助

看起来问题出在几个常见的CSS布局细节上，咱们一步步来解决：

1. 重置基础样式，确保视口高度计算准确 #

浏览器默认会给html和body添加 margin/padding，这会导致设置了height:100vh的#conA实际总高度超过视口。先把这些默认样式清掉：

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

2. 修正#conA的盒模型 #

默认的box-sizing: content-box会让元素的height只计算内容高度，加上你给的蓝色边框后，总高度就会超出100vh。把盒模型改成border-box，让边框和内边距包含在设置的高度里：

#conA {
  height: 100vh;
  box-sizing: border-box; /* 关键：边框和padding算在height内 */
  margin: 0;
  padding: 0;
}

3. 处理桌面端（笔记本）的子元素布局 #

在平板的媒体查询里，你用了绝对定位让子元素脱离文档流，所以不会撑高#conA；但笔记本上子元素是正常文档流，如果它们的总高度超过100vh，就会把#conA撑大。可以用flexbox来控制子元素在视口内：

/* 针对笔记本屏幕（假设宽度大于959px） */
@media (min-width: 960px) {
  #conA .container {
    display: flex;
    flex-direction: column; /* 垂直排列子元素，可根据需求改成row */
    height: 100%; /* 让容器占满#conA的高度 */
    justify-content: center; /* 子元素垂直居中 */
    align-items: center; /* 子元素水平居中 */
    gap: 2rem; /* 子元素之间的间距，可选 */
  }
  
  #heroText, #images {
    max-width: 100%; /* 防止内容超出容器 */
    flex: 0 1 auto; /* 不允许子元素过度拉伸 */
  }
}

4. 用100dvh替代100vh（可选但推荐） #

100vh在某些浏览器中会包含滚动条高度，导致实际显示超出视口。改用100dvh（动态视口高度）能更准确地匹配可视区域高度：

#conA {
  height: 100dvh; /* 代替100vh，适配性更好 */
}

按上面的步骤调整后，#conA应该就能在笔记本上准确铺满视口，同时保持平板端的正常显示了。

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