粘性页脚问题

Posted 2023-03-21

【中文标题】粘性页脚问题

【英文标题】：Sticky Footer Issues

【发布时间】：2014-09-23 10:45:23

【问题描述】：

我正在尝试根据我在网上找到的一个简单的教程创建一个粘性页脚。这似乎工作正常，直到我尝试在我的内容 div 上设置一个宽度，但我不知道为什么。

如果我向内容 div 添加宽度，则页脚与内容 div 之间似乎不再有任何距离，因此如果内容很多，它会掩盖内容。

我已经创建了这个 jsfiddle，但它看起来不像在 firefix 或 IE 中那样明显。

有人知道为什么会发生这种情况吗？我可以做些什么来让内容 div 具有固定宽度和自动边距以使其居中，但如果几乎没有任何内容或内容丰富。

下面是我的内容 div 的 css：

#content 
                margin-top: 15px;                   
                padding-bottom:100px; /* Height of the footer element */
                border-left: 1px solid #C9C9C9;
                border-right: 1px solid #C9C9C9;
                border-bottom: 2px solid #C9C9C9;                    
                box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;                    
                width: 1024px; /* Here adding a width causes the footer to overlap */
                margin-left:auto;
                margin-right:auto;
                background-color: white;
                text-align: center;
                border: 1px solid red;
            

http://jsfiddle.net/32M9Q/1/

【问题讨论】：

我在内容上有和没有宽度的情况下查看小提琴，似乎与页脚和内容的关系没有区别。你的页脚是绝对定位的，所以它不是一个粘性页脚，它与你的内容宽度无关

不只是视觉上的东西吗？从页脚jsfiddle.net/32M9Q/7

中删除框阴影和边框

如果它被视为一个网页，我可以看到，当我删除内容 div 的宽度时，页脚就可以了，如果我再添加它的宽度现在位于内容 div 的顶部。

【参考方案1】：

至少在 Chrome 中，JSFiddle 对我来说没有问题。无论是否在内容上设置宽度，它看起来都一样。我什至添加了更多单词，页脚仍然没有切断任何内容。所以padding 确实有效，至少在我的情况下。

但是，根据您在另一个答案中所说的话，也许您可​​以将页脚上的 position:absolute 更改为 position:relative （假设页脚下面没有任何东西......我猜不是因为它是页脚）。它确保页脚放置在内容之后，而不是放在内容之上。不过要小心，并确保在许多不同的情况下（浏览器和设备）进行检查。

我还会在内容中添加margin-bottom，以防万一。

【参考方案2】：

尝试将以下 CSS 规则添加到 #footer 元素：

position: fixed;
clear: both;

这将为您提供一个不与主要内容重叠的粘性页脚（如果我得到了您想要正确执行的操作）。您可能会放弃 clear: both 部分，但它可能对某些浏览器有所帮助...

【讨论】：

嗨对不起，也许我的解释不够清楚，我不想要一个总是在底部的页脚，即使有内容，我想要的是一个总是在底部的页脚页面即使有很多内容，如果有很多内容我不希望页脚遮住它。

@berimbolo 为什么将页脚位置设为绝对位置？

@Huangism 我将页脚位置设为绝对位置，因为这是教程中的 css，它似乎可以正常工作，直到有很多内容，此时页脚会溢出内容，直到我从内容 div 中删除宽度。

实际上删除宽度仅意味着它不再覆盖文本，问题是页脚似乎在内容 div 内，即使它不是。它几乎就像它不是被推下而是填充底部一样。

@berimbolo 页脚重叠，因为您的页脚是绝对定位的（使其脱离正常流程）。当有很多内容时，要有一个位于底部的页脚，那么您不需要绝对，但是如果您想要一个没有内容的页脚位于底部，那么您需要绝对。只需为内容添加更多填充。您需要填充页脚的高度+内容所需的填充，在您的情况下，将其填充 180px

【参考方案3】：

设置我的网页的背景颜色以匹配页脚和正文不是一个选项，我感谢到目前为止我得到的所有答案，但不幸的是它们都不适合我。

我不得不做我认为是 hack，即在高于页脚的内容下方添加一个 div，这意味着页脚位于此 div 之上，而不是我的内容，给人一种空间错觉内容和页脚：

<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>