Question

我一直无法在我一直使用的模板上让页脚停留在浏览器的底部。如果有足够的内容来“推”页脚，它在firefox上看起来没问题，但我可以看到它在页面底部上方的“半空中”看起来非常糟糕。

有些东西肯定是错的，但即使在我看过许多粘性页脚教程之后，似乎没有人解决这个问题，它只是“打破”页脚，通常会让它脱节。我仍然是html / php的初学者所以非常感谢任何帮助，我很想解决这个问题。

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

Answer 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;
    }

Answer 2

修正分区上方分区的最小高度。我认为它会奏效。

否则将页脚的position属性设置为absolute，将bottom设置为0.尝试希望它可以正常工作。

Answer 3

试试这个：

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

Answer 4

position:absolute;
bottom:0;

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

看一下这个例子：Here

Answer 5

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

我也试图深究这一点。这是我的基本例子。它在响应式网站中变得更加复杂......但是我要记住它有可能......希望这会有所帮助吗？

Answer 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>

我希望这可以帮助

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

6 个答案: