窗口调整大小时固定定位Footer滚动覆盖页面主体内容问题求助

问题点 #

• HTML结构错误：#content容器未闭合，footer错误嵌套在#content内部，且footer内存在多余的</div>标签；块级元素h2嵌套在p标签内不符合HTML规范，会导致浏览器解析DOM结构异常。
• 定位逻辑错误：footer设置了position: fixed固定定位，该属性会让元素脱离正常文档流，始终固定在视口底部，页面内容高度超过视口高度滚动时，自然会覆盖上层内容。
• 样式缺失：footer未设置背景色，内容重叠时视觉表现更混乱；section.bottom的transform偏移逻辑属于冗余代码，无实际作用。

修复方案 #

1. 先修正HTML结构，闭合#content容器，将footer移到#content外部，删除多余标签，修正嵌套错误。
2. 替换固定定位为Flex粘性页脚方案，实现内容不足时贴在视口底部、内容超出时跟随文档流排在页面末尾的效果，不会遮挡内容。
3. 补全footer背景色，删除冗余样式。

修正后HTML代码 #

<body>
  <div id="content">
    <section class="helvetica">
      <div class="image-wrapper logo">
        <img src="./resources/images/dsn-designs.png" alt="站点logo">
      </div>
      <div class="image-wrapper">
        <img src="./resources/images/dsn.jpg" alt="展示图">
      </div>
    </section>
    <section class="helvetica">
      <h2>Welcome.</h2>
    </section>
  </div>
  <footer>
    <section class="bottom">
      <p><a href="mailto:hello@duncan-newby.co.nz" class="push link-green" target="_blank">hello@duncan-newby.co.nz</a></p>
    </section>
  </footer>
</body>

修正后CSS代码 #

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 0.08em;
    line-height: 1.3em;
    background: #9fab9d;
    color: white;
    /* 粘性页脚基础配置 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

#content {
    margin: calc(2vw + 20px);
    flex: 1;
}

section {
    margin-bottom: 2em;
}

footer {
  width: 100%;
  background-color: #9fab9d;
  color: white;
  text-align: left;
  padding: 1em 0;
}

section.bottom {
  margin-left: calc(2vw + 20px);
}

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