页面底部的粘滞页脚问题

Question

我目前正在完善我的code editor's webpage。

我有一个粘性页脚（意味着无论如何都粘在页面底部）。

但是，虽然我不知道怎么做，突然之间我一定是调整了一些东西，它又松开了。

你猜怎么着，我无法修复它。 :S (我不得不承认 CSS 从来都不是我的菜...)

有什么想法吗？

---

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

---

更新：

各位，非常感谢您的超快回复。我认为你做对了。但不是 100% - 也许我没有清楚地解释我需要什么。

添加position:fixed 确实将其固定到底部。但是，假设在主页中，页脚位于内容上方（如顶部导航栏）。这不是我需要的。 “粘性”是指它必须停留在页面底部。如果它是一个短页面，那么它会出现在底部。如果页面很长，只有滚动到页面的最底部才能看到它。

Answer 1

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

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

更新

更新后：移除 body 元素上的 margin-bottom: 45px 并添加 min-height: 100%

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

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

更新

html {
    height: 100%;
}

Answer 2

我很惊讶没有人能正确回答你的问题，因为你解释得这么清楚。

这就是您仅使用 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 3

改变

#footer {
position: absolute;
...

到

#footer {
position: fixed;
...

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 中有一个固定的位置。

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

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

编辑：

如果您希望您的页脚仅出现在最底部，请将页脚的 margin-bottom 设置为 0px，如下所示：

#footer {

    margin-bottom: 0px;

}

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>

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

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

最后，将box-sizing: border-box; 设置为所有元素* {...} 以强制浏览器计算框的大小，包括边框和内边距。

聚在一起 - Example

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 45px; /* height of the footer */
}

.navbar {
  height: 30px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

#main {
  padding-top: 30px; /* height of the fixed positioned header */
}

#footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45px;
}

Answer 8

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

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

Answer 9

为了更好地理解 CSS，您应该了解“位置”值的工作原理。 html站点中所有元素的默认值为：

position:static;

现在，对于您自己的问题，position:fixed 是您的解决方案，但不要只使用它而从中学到任何东西。 您可以轻松地试验位置值以查看它们在 html 文档上的工作方式。

例如，首先使用绝对位置并添加动画 位置固定的类 onscroll 会给你一个很好的滚动效果。

您可以查看这篇非常详细的文章：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 的 sn-p（希望你已经安装了 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);