修复粘性页脚而不重叠正文内容答案

【问题标题】：Fixing sticky footer without overlapping body content修复粘性页脚而不重叠正文内容
【发布时间】：2018-10-06 10:33:38
【问题描述】：

我需要帮助将页脚固定在底部，但也不与上部元素重叠。由于我在大学毕业后花了 2 年时间才找到一份网络工作，所以我对此还是很陌生/生疏，所以我没有跟上我应该做的那么多。

无论如何，这是我拥有的html的格式。我希望“页脚”卡在底部，所以当他们从底部向上滚动时它会保持不变。但我也不希望它被推得太高而在其下方留出空白。

我一直在尝试为页脚使用“位置：绝对”样式以使其保持在底部。但我只是在某处读到这使它脱离了常规流程，这就是导致重叠的原因。

那么如何重新格式化我的样式以允许页脚保持在下方但不重叠？

HTML：

<html>
<header></header>
<body>
    <div class="content">
        <div class="hd">Content of header</div>
        <div class="bd">Content of body</div>
        <div class="ft">Content of footer</div>
    </div>
</body>
</html>

CSS：（基本部分）

div {
    display: block;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.hd {
    position: static;
    flex: 0 0 auto;
}
.bd {
    position: relative;
    flex: 1 0 auto;
}
.ft {
    position: absolute;
    bottom: 0px;
    flex: 0 0 auto;
}

【问题讨论】：

Preventing fixed footer from overlapping content的可能重复
你必须自己做这一切还是可以使用像bulma这样运行良好的css框架？
@sweaver2112 我想我以前读过那篇文章，但由于某种原因我无法让它发挥作用。
@ZiggZagg 我没听说过布尔玛，它是什么？如果我能自己让它发挥作用，那将是理想的，这样我以后就可以帮助在投资组合中展示它
@DrChuckster007 bulma.io/documentation/overview/start 并且请使用现代编辑器，例如括号或 Visual Studio 代码。

标签： footer overlap absolute sticky-footer

【解决方案1】：

只需在您的body 底部添加一个与页脚height 相等的边距。

因此，如果您的页脚有一个 height 或 100px，那么您需要将其添加到您的 css 中：

body {
    margin-bottom: 100px;
}

【讨论】：

我已经为我的 .body 设置了自动边距
是的，但是由于您的页脚的位置为absolute，因此正文假定页脚 div 不在文档流中，这意味着您必须手动为页脚设置正文的下边距。这适用于使用fixed 或absolute 定位的元素。
你说的是整体还是 class="body" div 元素？
整个身体。避免将具有默认页面元素（如 body 或 html）的 div 类命名为 1. 避免混淆和 2. 维护代码语义。
好的，我编辑了我的原始代码框，以更准确地显示我是如何设置它的。这 3 个 div 元素都在 body 标签内。我是否应该将我命名为“ft”的 div 标签改为实际的页脚标签，然后尝试您建议的边距底部编辑？

【解决方案2】：

我按照 sweaver2112 建议的链接中的说明进行操作，我必须删除一些重复的元素并更改其他元素，最后我让页脚不重叠。必须使用 flex 才能使其与其他 div 元素一起使用

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

.ft {
  flex: 0 0 50px;
  margin-top: auto;
}

感谢大家的支持！

我使用的答案链接：LINK

【讨论】：

【解决方案3】：

我想你可能正在寻找 position: fixed; 例如：

.footer {
 position: fixed;
 bottom: 0;
}

无论内容如何，这都会将页脚固定在窗口底部，因此当您滚动时，页脚将始终停留在底部。然而，这将在内容上方（重叠），因此您还需要应用 AndrewL 的选项以防止内容位于页脚下方。

【讨论】：