0

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

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

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

4

6 回答 6

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;
    }
于 2012-08-16T11:05:45.570 回答
1

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

否则将页脚的位置属性设置为绝对和底部为0。试试这个希望它会工作。

于 2012-08-21T11:45:41.933 回答
0

尝试这个：

#footer {
    position:absolute;
    bottom:0px;
}
于 2012-08-16T10:59:24.403 回答
0

我认为您需要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>

我希望这有帮助

于 2012-08-28T12:37:17.003 回答
0 
position:absolute;
bottom:0;

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

看看这个例子：这里

于 2012-08-21T11:56:05.797 回答
0

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

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

于 2012-08-22T03:51:12.490 回答