使用 100vh 时页脚与正文部分重叠

Question

我正在做一个投资组合项目，我观察到这种奇怪的重叠。 我想为“关于部分”设置 100vh（嘿，我是刘）。 有没有办法使用 100vh 而不会出现页脚重叠？

Link to the project

#welcome-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #33546d;
  width: 100%;
  height: 200px;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
  left: 0px;

  font-size: 10px;

  color: #7fa7b8;
  background: #33546d;
}

Answer 1

页脚有 position:absolute。这将使导航栏与页脚重叠，因为它只是漂浮在屏幕底部而不是实际上它们像一个元素 position: relative;

确保正文的高度至少为 100vh 并将 margin-top auto 应用于页脚将有所帮助，至少，如果您从页脚中删除绝对位置并使其显示块。