设置100vh的section内容重叠、高度未达预期的技术问询

问题分析与修复方案 #

问题1：About区块内容侵入前一个Section #

原因：

1. 未设置box-sizing: border-box，导致.about的padding:70px 120px 0 120px会额外增加元素总高度，超出100vh后溢出到前一个区块。
2. .about-2的margin-bottom:-50px和全局h2的margin-top:-100px属于负边距，强制元素向上偏移，直接覆盖前一个Section的内容。

修复步骤：

• 全局设置盒模型，让padding包含在元素高度内：

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  

• 移除导致元素上移的负边距：

  .about-2{
      margin-bottom: 0; /* 替换原有的-50px */
  }
  h2{
      margin-top: 0; /* 替换原有的-100px */
  }
  

问题2：Services区块高度未达100vh #

原因：

1. 浏览器默认给body添加了margin，导致页面整体有偏移，Services区块的100vh会被顶部的margin挤压，视觉上高度不足。
2. 未确保html和body的高度基准，100vh的计算可能出现偏差。

修复步骤：

• 初始化html和body的高度与溢出设置：

  html, body {
      height: 100%;
      overflow-x: hidden; /* 防止横向溢出 */
  }
  

• 确保Services区块的盒模型正确，可添加背景色验证高度：

  .services{
      height: 100vh;
      background: #f5f5f5; /* 可选，方便直观查看高度是否铺满视口 */
  }
  

修改后完整CSS示例 #

/* 全局初始化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

.about{
    display: flex;
    height: 100vh;
    justify-content: space-between;
    gap: 100px;
    align-items: center;
    width: 100%;
    margin: auto;
    padding: 70px 120px 0 120px;
    background: #323946;
}
.img-2{
    max-width: 450px;
    height: 450px;
    border-radius: 40px;
    border: 10px solid #0ef;
    box-shadow: 0px 0px 4px 0px #0ef;
}
.about-2{
    margin-bottom: 0;
}
h2{
    font-size: 3em;
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
}
#low{
    color: var(--color1);
}
#heading{
    margin-top: 0;
    padding-top: 0;
}
.btn-1{
    display: inline-block;
    text-decoration: none;
    margin-top: 50px;
    border-radius: 30px;
    background: var(--color1);
    padding: 14px 28px;
    box-shadow: 0 0 10px var(--color1);
    transition: .7s;
    font-weight: 600;
}
.services{
    height: 100vh;
    background: #f5f5f5;
}

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