修复粘性页脚而不重叠正文内容
Posted
技术标签:
【中文标题】修复粘性页脚而不重叠正文内容【英文标题】：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 代码。 【参考方案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 的选项以防止内容位于页脚下方。
【讨论】：
以上是关于修复粘性页脚而不重叠正文内容的主要内容，如果未能解决你的问题，请参考以下文章