为什么页脚不能一直走到底部？

我有一个网页如下： http://www.transeeq.com/health/bq17a.html#为什么页脚不能一直走到底部？

黄色页脚不会推到底部。有任何想法吗？这里是CSS代码：

#container { 
    min-height:100%; 
    position:relative; 
} 

#body { 
    padding-bottom:60px; /* Height of the footer */ 
} 

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px;   /* Height of the footer */ 
    background:#CCCC66; 
}

来源

2010-02-02 sonny5

作为一个纯粹的HTML/CSS的设计问题，这属于上doctype.com – BobMcGee 2010-02-02 03:52:12

你的意思是说，它不会延伸到底部时，你必须滚动查看所有内容吗？ – Jacob 2010-02-02 03:53:30

@BobMcGee：HTML/CSS问题确实属于这里。 DocType不隶属于StackOverflow，像这样的问题在这里确实有一席之地。 – 2010-02-02 03:58:58

我刚测试过它;它延伸到Chrome，Firefox，Opera，Safari，IE8，IE7甚至IE6的底部。你在哪个浏览器中遇到这个问题，你能更详细地描述你的问题吗？

来源

2010-02-02 03:50:15 Zarel

它的工作原理;你的CSS可能被缓存在本地。你最近是否做过强制浏览器刷新？按Ctrl + F5。

来源

2010-02-02 03:51:55

您是否尝试将页脚浮动到底部并将位置更改为相对？

来源

2010-02-02 03:52:34 poldo

你有“身高：60px;”在#footer。尝试在.css中创建一个更小的数字。

来源

2010-02-02 03:56:06 brianray

I use this css.

* { 
     margin: 0; 
} 
html, body { 
     height: 96%; 
} 
.wrapper { 
     min-height: 96%; 
     height: auto !important; 
     height: 96%; 
     margin: 0 auto -4em; 
} 
.footer, .push { 
     height: 4em; 
}

而且你可以用它在你的HTML页面这样

<html> 
    <head> 
     <link rel="stylesheet" href="layout.css" ... /> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <p>Your website content here.</p> 
      <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2008</p> 
     </div> 
    </body> 
</html>

它的工作原理相当不错，在IE和Firefox

来源

2010-02-02 03:56:54

@brasofilo这是一个旧的答案;-)我编辑它以添加基本信息。 – 2014-07-20 12:28:25

答案出现在低质量帖子评论中。有人可能会标记它。现在看起来不错;） – brasofilo 2014-07-20 13:47:31

如果您在页脚尝试position: fixed代替希望确保它始终位于窗口的底部。否则，为了确保它始终位于文档的底部，可以将其位置保持为相对/自动。

来源

2010-02-02 03:57:31 Jacob

将footer放在container div之内 - 如果您想使用position：absolute将页脚放在页面的底部（而不是窗口的底部），则需要将它放在相对位置的div中，例如作为你的容器。

看一看this article

来源

2010-02-02 04:05:52 jfrej

尝试的CSS代码，实现了 “粘页脚”（每http://ryanfait.com/sticky-footer/）。

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
}

来源

2010-02-02 10:33:49 pixeltocode

为什么页脚不能一直走到底部？

回答

相关问题