Question

我希望我的页脚始终位于页面底部，即使内容非常短。我已经检查过这个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;
 }

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

Answer 1

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

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

Answer 2

请尝试使用position:fixed。

http://jsfiddle.net/akMpT/

如果您只是想将页脚向下推到页面底部（如跳码所示），而不是固定其位置。将容器高度设置为100％，以及包括<html>和<body>

在内的所有父元素

高度小提琴：100％方法：http://jsfiddle.net/akMpT/1/

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

Answer 3

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

JSFiddle Demo

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

Answer 4

提供“position：fixed”将使您的页脚保持在底部或您喜欢的任何位置以保留其他属性（顶部：0;底部：0;，左：0;，右：0;）。将它们与“位置属性”一起使用。

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

Answer 5

粘性页脚（浏览器底部）

的 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"); } });

在网页底部粘贴页脚

5 个答案:

粘性页脚（浏览器底部）

正常页脚（文档底部）