0

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

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

4

5 回答 5

0

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

JSFiddle 演示

#wrap-footer { 
   height: 320px;
   position: absolute;
   width: 100%;
   bottom: 0;
    background:red;
 }
于 2013-10-18T14:45:35.027 回答
0

如果你添加position:fixed;到你的页脚它应该工作

#footer { 
   height: 320px;
   position: fixed;
   width: 100%;
   bottom: 0;
 }
于 2013-10-18T14:42:56.020 回答
0

尝试position:fixed改用。

http://jsfiddle.net/akMpT/

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

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

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

于 2013-10-18T14:42:57.440 回答
0

粘性页脚（浏览器底部）

演示小提琴

CSS

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

普通页脚（文档底部）

演示小提琴

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");
    }
});
于 2013-10-18T14:49:54.753 回答
0

提供 "position:fixed" 将使您的页脚保持在底部或任何您想要保留它的附加属性（top:0;bottom:0;,left:0;,right:0;）。将它们与“位置属性”一起使用。

 #wrap-footer
{
   position: fixed;
   left:0;
   bottom: 0;
   height:10px; /*according to your will*/
}
于 2013-10-18T14:48:31.313 回答