Question

我正在制作我的code editor's webpage。

我有一个粘性页脚（意思是坚持页面的底部，无论如何）。

然而，虽然我不知道怎么样，突然之间我必须调整一些东西，然后又一次不粘。

Sticky footer

猜猜看，我无法修复它。：S（我必须承认CSS从来就不是我的...... ）

有什么想法吗？

P.S。这个问题在所有网页/子页面中都很明显，而不仅仅是主页。

更新

伙计们，非常感谢您的超快回复。我认为你做对了。但不是100％ - 也许我没有清楚地解释我需要它。

添加position:fixed 确实将其修复到底部。但是，让我们说在主页中，页脚位于内容之上（如顶部导航栏）。这不是我需要的。通过“粘性”，我的意思是它必须保持在页面的底部。如果它是一个短页面，那么它将出现在底部。如果它是一个长页面，只有当您在页面的最底部滚动时才会看到它。

Answer 1

将#footer更改为fixed的位置似乎正常。

http://css-tricks.com/snippets/css/fixed-footer/

<强>更新

更新后：删除body-bottom：45px on body元素并添加min-height：100％

body {
    /* margin-bottom: 45px; */
    position: relative;
    min-height: 100% /* for short pages */
}

然后页脚位置可以保持绝对。

<强>更新

html {
    height: 100%;
}

Answer 2

更改

#footer {
position: absolute;
...

到

#footer {
position: fixed;
...

Answer 3

为了制作一些东西，它应该在你的CSS中有一个固定的位置。

您可以在此处找到更多相关信息：http://www.w3schools.com/css/css_positioning.asp

确保您的页脚及其周围的所有div也设置为固定。

编辑：

如果您希望您的页脚仅显示在最底部，请将页脚的页边底部设置为0px，如下所示：

#footer {

    margin-bottom: 0px;

}

Answer 4

试试这个：

#footer {
    background: none repeat scroll 0 0 #ddd;
    border-top: 1px solid #aaa;
    bottom: 0;
    color: #666;
    font-family: "Helvetica Neue",Helvetica,arial,freesans,clean;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: fixed;
    width: 100%;
}

刚刚将位置更改为固定。

Answer 5

您需要使用底部固定的位置：0

 #footer {
position: fixed;
bottom:0;
}

Answer 6

我很惊讶没有人能够正确回答你的问题，因为你已经清楚地解释了这个问题。

这是你只使用css的方法。让我们说这是你的HTML标记：

<div class="wrapper">
     <p>Your website content here.</p>
</div>

<div class="footer">
     <p>Copyright (c) 2008</p>
</div>

css应如下所示：

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    /* equal to footer height: */
    margin-bottom: -140px;
 }

.footer {
    height: 140px;
}

链接：http://css-tricks.com/snippets/css/sticky-footer/

Answer 7

实际上，页面底部有couple of methods粘性页脚。您似乎正在使用Matthew James Taylor's method，但您的代码中存在错误。

假设给定标记：

<body>
    <div class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="main"></div>
    <div id="footer"></div>
</body>

您可以按照以下步骤解决问题并获得粘性页脚：

<html>应明确height 100%。
<body>应该：
1. min-height的{{1}}。
2. 相对定位。即100%。
3. 底部填充作为粘性页脚的高度。
position: relative应该有一个顶部填充作为固定标题的高度（由您决定）。
#main应位于#footer底部 - absolute。

最后，将position: absolute; bottom: 0;设置为所有元素box-sizing: border-box;，以强制浏览器计算包含边框和填充的框的大小。

全力以赴 - Example

* {...}

Answer 8

粘性页脚是最简单的方法： DEMO

footer{
    width:100%;
    height:50px;
    background-color:black;
    position:fixed;
    top:100%;
    left:0;
    margin-top:-50px;
}

Answer 9

为了更好地理解CSS，你应该理解＆＃34;位置＆＃34;价值有效。所有元素的默认值＆＃39;在一个HTML网站是：

position:static;

对于你自己的问题，position:fixed是你的解决方案，但不要只使用它，不要学习它。您可以轻松地尝试位置值，以查看它们在html文档中的工作方式。

例如，首先是位置绝对，然后添加动画位置固定在滚动上的类将为您提供非常好的滚动效果。

您可以查看这篇非常详细的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/position。最后，我给你答案：

   #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/ *更新

使用纯CSS无法实现粘性页脚效果。问题是你需要一个功能来测量窗口的高度，并从顶部给页脚提供正确的边距。
为了实现这一点，你可以使用这个jQuery片段（希望你安装了jQuery）：

$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});

Answer 10

你能用javascript吗？如果是这样，那么你可以在页面的末尾或超时运行这个javascript：

编辑（我不是强迫使用javascript，还有很棒的CSS答案：）

var setPosition = function(){
    var foot = document.getElementById('gridContainer2');
    foot.style.position = "relative";
    if((foot.offsetTop + foot.offsetHeight) >= window.innerHeight){
        foot.style.position = "fixed";
    }
    else{
        foot.style.position = "relative"; //or whatever you wish
    }
}
setTimeout(function(){
    setPosition();
    window.onresize = function(){setPosition();};
},10);

在页面底部出现粘性页脚问题

10 个答案:

全力以赴 - Example