页脚位置固定重叠页面内容答案

【问题标题】：Footer Position Fixed overlapping page content页脚位置固定重叠页面内容
【发布时间】：2019-07-29 04:58:35
【问题描述】：

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

这是我的footer css

footer {
position:fixed;
bottom: 0;
}

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

这是页面与页脚重叠内容的外观

【问题讨论】：

Sticky footer with flexbox的可能重复

标签： html css

【解决方案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;
}

查看下面的完整演示代码，了解更多关于 flex box 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>

【讨论】：