Question

我有一个网页如下： 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;
}

Answer 1

有效;您的CSS可能正在本地缓存。你最近做过强制浏览器刷新吗？按Ctrl + F5。

Answer 2

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中运行良好

Answer 3

尝试使用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 */
}

Answer 4

我刚试过它;它扩展到Chrome，Firefox，Opera，Safari，IE8，IE7甚至IE6的底部。您在哪个浏览器中遇到此问题，是否可以更详细地描述您的问题？

Answer 5

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

Answer 6

你有“身高：60px;”在#footer。尝试在.css中使用较小的数字。

Answer 7

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

Answer 8

将footer放在container div中 - 如果您想使用position：absolute将页脚放在页面底部（而不是窗口底部），则需要将其放入在一个相对定位的div中，例如你的容器。

查看this article

为什么页脚不会一直到底？

8 个答案: