如何让section和footer与侧边栏nav左对齐？布局重叠问题排查

核心成因 #

• HTML结构不合法：你把<footer>放在了<body>标签外面，这违反HTML规范，浏览器渲染时会自动修正，但会打乱元素的布局逻辑。
• 盒模型计算偏差：默认情况下CSS的width只计算元素内容区的宽度，padding会额外增加元素的总宽度。比如你的nav设置了width:30%+padding:10px，实际总宽度会超过30%；footer的width:70%+padding:20px，总宽度也会超过70%，两者加起来就超出了页面100%的宽度，自然会重叠。
• 绝对定位脱离文档流：三个元素都用了position:absolute，完全脱离了文档流，彼此之间没有布局约束，就算宽度比例设置正确，也会因为盒模型的额外宽度导致重叠。

修复方案 #

1. 修正HTML结构 #

把<footer>移到<body>内部，放在<section>之后：

<body>
  <nav class="sidebar">
    <!-- Put Here content of sidebar -->
    Content example
  </nav>
  
  <section>
    <!-- Put Here content of section -->
    Content example
  </section>

  <footer>
    Content example
  </footer>
</body>

2. 统一盒模型+修正绝对定位 #

给所有元素添加box-sizing: border-box，让padding包含在width的计算范围内，同时给body设置相对定位作为绝对定位元素的参考：

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

body {
  background: gray;
  min-height: 100vh; /* 确保body占满视口高度 */
  position: relative; /* 让绝对定位的子元素以body为参考 */
}

section {
  background: red;
  width: 70%;
  position: absolute;
  top: 0;
  right: 0;
  min-height: calc(100vh - 80px); /* 预留footer高度 */
}

footer {
  background: green;
  width: 70%;
  padding: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

nav {
  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  color: #fff;
  padding: 10px;
}

3. 更优布局方案（推荐） #

如果不想用绝对定位，用Flex布局更简洁，也不会有脱离文档流的问题：

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

body {
  background: gray;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

nav {
  width: 30%;
  background: blue;
  color: #fff;
  padding: 10px;
}

.main-content {
  width: 70%;
  display: flex;
  flex-direction: column;
}

section {
  background: red;
  flex: 1; /* 占满剩余高度 */
}

footer {
  background: green;
  padding: 20px;
}

对应的HTML：

<body>
  <nav class="sidebar">
    Content example
  </nav>
  
  <div class="main-content">
    <section>
      Content example
    </section>

    <footer>
      Content example
    </footer>
  </div>
</body>

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