尝试使用许多粘性页脚教程，无法修复页脚答案

【问题标题】：Tried using many sticky footer tutorials, cannot fix footer尝试使用许多粘性页脚教程，无法修复页脚
【发布时间】：2012-08-28 20:37:17
【问题描述】：

在我一直使用的模板上让页脚留在浏览器底部时遇到了问题。如果有很多内容可以“下推”页脚，它在 Firefox 上看起来不错，但我可以在 chrome 中看到它位于页面底部上方的“半空中”，看起来很糟糕。

它一定有问题，但即使在我查看了许多粘性页脚教程之后，似乎也没有一个可以解决问题，它只是“破坏”了页脚，通常使它脱节。我仍然是 html/php 的初学者，所以非常感谢任何帮助，我迫切希望解决这个问题。

我已将 style.css 和示例页面粘贴到 jsfiddle 上：http://jsfiddle.net/3KZh3/4/

【问题讨论】：

我感受到了你的痛苦。我不是初学者，这是一直困扰我的事情之一。我最近花了很多时间试图彻底解决它......试图找到它 -
是的，一开始它有效或似乎有效，现在在其他浏览器中检查它就像它从来没有“粘”一样，我改变的一切都会破坏它。

标签： html css footer sticky-footer

【解决方案1】：

   Try this one dont forget to add  `position:relative` to it's parent div or element 
   #parent-div{
          position:relative;
    }

    #footer {
        position:absolute;
        bottom:0px;
    }

【讨论】：

嗨，我很欣赏这个建议，但是当我尝试从许多粘性页脚教程中添加代码时，我得到了这个结果：i50.tinypic.com/15ox8qr.png
然后添加在线图片路径，或者jst使用纯色，我只想看到你的带有父div的HTML和css代码，不要看图片

【解决方案2】：

修复页脚上方分区的最小高度。我认为它会起作用。

否则将footer的position属性设置为absolute，bottom设置为0。试试这个希望它会起作用。

【讨论】：

虽然我似乎需要增加最小高度直到它仍然将页脚向下推到页面底部，如果我让它足够长以供一个浏览器使用，你必须向下滚动才能看到它在另一个浏览器中。

【解决方案3】：

试试这个：

#footer {
    position:absolute;
    bottom:0px;
}

【讨论】：

我很欣赏这个建议，但我得到的结果或多或少与上述评论相同，或者当我尝试从粘性页脚教程中添加代码时：i50.tinypic.com/15ox8qr.png
阅读学习this

【解决方案4】：

position:absolute;
bottom:0;

将使您的页脚停留在底部。但是您必须相应地对其余内容进行一些更改。

看看这个例子：Here

【讨论】：

非常感谢我会试试这个。

【解决方案5】：

http://jsfiddle.net/sheriffderek/varaH/1/

我也在努力追根究底。这是我的基本示例。它在响应式网站中变得更加复杂......但我记住这一点是有可能的......希望这会有所帮助？

【讨论】：

在看完这个帖子之后——我现在很困惑......所以也许这不是你想要的......但这就是人们所说的“粘性”页脚......虽然。 ..这似乎不是一个好名字...
谢谢，不过我会看看。

【解决方案6】：

我认为你需要使用position:fixed 尝试通过在正文中添加大量虚拟数据来进行实验，以便滚动页面。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Some Page</title>
    <style type="text/css">
        #footer{
            position:fixed;
            bottom:0px;
            background-color: black;
            color:white;
        }
    </style>
</head>
<body>
    <h1>Some Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div id="footer">
        &copy; company name
    </div>
</body>
</html>

希望对你有帮助

【讨论】：

如果我添加 css 然后页脚浮动在页面的底部，而不是作为页面本身的一部分，您的代码可能与页脚的其余代码不兼容。不过谢谢。