Question

我在尝试使页脚位于底部时遇到问题，但是如果内容过多，它将与页面上的内容重叠。

这是我的footer css

footer {
position:fixed;
bottom: 0;
}

这是没有任何内容的页面外观

页面与页脚内容重叠时的外观

Answer 1

您可以按如下所示构造HTML：

<body>
  <header class="Header"></header>
  <main class="Main"></main>
  <footer class="Footer"></footer>
</body>

然后，使用flex box使用以下代码在页面底部呈现页脚：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer,
header {
  flex: 0;
}

请参见下面的完整演示代码，并详细了解弹性盒here：

header::after,
main::after,
footer::after {
  content: attr(class);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}

footer,
header {
  flex: 0;
}

<header class="Header"></header>
<main class="Main"></main>
<footer class="Footer"></footer>

页脚位置固定的重叠页面内容

1 个答案: