在网页底部粘贴页脚[重复]答案

【问题标题】：Stick footer on bottom of web page [duplicate]在网页底部粘贴页脚[重复]
【发布时间】：2013-10-27 10:58:30
【问题描述】：

我希望页脚始终位于页面底部，即使内容很短。我已经检查过这个http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 但不起作用。

我的 HTML：

<body>
   <div id="container">
      <div id="header"></div>
      <div id="content"></div>
  </div>
  <div id="wrap-footer">
      <div id="footer"></div>
  </div>
 </body>

我的 CSS：

 #footer { 
   height: 320px;
   position: absolute;
   width: 100%;
   bottom: 0;
 }

有了这个，当我有一个简短的内容时是可以的，但是当我有一个长的时候，页脚会进入页面中间并卡在那里。有人有想法吗？提前致谢

【问题讨论】：

position: fixed 是正确答案，但请注意，浏览器对此的支持远非普遍。在过去，我不得不使用基于 javascript 的东西来将页脚保持在正确的位置。有关浏览器支持的更多详细信息，请参阅quirksmode.org/css/css2/mobile.html。
位置固定，让页脚贴在页面的末尾，而不是内容的结尾。所以不是我想要的
@Dan 据我了解，他希望它位于文档底部，而不是浏览器。
刚刚意识到这就是我略读一个问题的结果——我很抱歉..
这个问题之前有人问过。很多。我总是最终使用的最简单的解决方案可以在这里找到：ryanfait.com/sticky-footer。请记住，如果不固定页脚的高度，这几乎是不可能的（直到position: sticky 成为现实）。

标签： html css position footer

【解决方案1】：

如果您将position:fixed; 添加到您的页脚，它应该可以工作

#footer { 
   height: 320px;
   position: fixed;
   width: 100%;
   bottom: 0;
 }

【讨论】：

【解决方案2】：

在这种情况下，这是因为您将定位应用于错误的元素。

JSFiddle Demo

#wrap-footer { 
   height: 320px;
   position: absolute;
   width: 100%;
   bottom: 0;
    background:red;
 }

【讨论】：

【解决方案3】：

提供“位置：固定”将使您的页脚保持在底部或任何您希望保留它的其他属性（顶部：0；底部：0；，左侧：0；，右侧：0；）。将它们与“位置属性”一起使用。

 #wrap-footer
{
   position: fixed;
   left:0;
   bottom: 0;
   height:10px; /*according to your will*/
}

【讨论】：

【解决方案4】：

粘滞页脚（浏览器底部）

DEMO FIDDLE

CSS

footer { position:fixed; bottom:0px; }$(document).ready(function() {

普通页脚（文档底部）

DEMO FIDDLE

CSS

footer { bottom:0px; }

jQuery

$(document).ready(function() {
    moveFooter();
    $(window).resize(function() {
        moveFooter();
    });

    function moveFooter() {
        var dH = $(document).height();
        var wH = $(window).height();

        if (dH < wH)
            $('footer').css("position", "relative");
        else
            $('footer').css("position", "absolute");
    }
});

【讨论】：

我觉得使用 jQuery 有点多，但仍然有效。 +1 干得好。
@Ruddy 对于旧版浏览器来说，没有 jQuery 真的很难。
即使在旧版浏览器中，Javascript 也无法解决问题。
@logic-unit 您打算如何实现非粘性页脚？如果文档高度小于窗口高度或窗口高度和页脚高度小于文档高度，则您的不起作用？
@logic-unit 你投了可怜的票，因为我指出了你的解决方案中的缺陷？

【解决方案5】：

尝试改用position:fixed。

http://jsfiddle.net/akMpT/

如果您只是想将页脚向下推到页面底部（如 jumpingcode 所建议的那样），而不固定其位置。将容器高度设置为 100%，以及任何父元素，包括 <html> 和 <body>

高度：100% 方法：http://jsfiddle.net/akMpT/1/

正如 cmets 中所指出的，我的第二种方法并不完美。这个主题已经讨论了一百次，这里有一个如何正确使用 CSS 的示例。谷歌有无数其他人。 http://css-tricks.com/snippets/css/sticky-footer/

【讨论】：

这是一个粘性页脚，而不是文档底部的页脚。
问题是：在网页底部粘贴页脚。
@logic-unit 我认为他的意思是他希望页脚始终位于页面底部。例如：如果内容的高度为 100 像素，页脚仍将一直位于页面底部，而不仅仅是位于 100 像素的内容部分下方。（我认为）
是的。固定位置不是我想要的
@logic-unit 和 +1 干得好。