Firefox

Question

我在 Firefox 上遇到了一个小故障。我试图将页脚放在页面底部。我在这里找到了一个粘性页脚示例：http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

我已经调整了那里的解决方案以适合我的应用程序。

代码如下：

CSS

.footer {
    height: 80px;
    position: absolute;
    text-align: center;
    bottom: 0;
}

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

.content-custom {
    padding-bottom: 80px;
}

HTML

<div id="wrapper" class="container">
    <div>Header</div>
    <div class="content-custom">Content</div>
    <div class="footer">Footer</div>
</div>

我在每个部分都包含了一些页面。我遇到的麻烦是页脚。它在 IE 和 Chrome 中工作正常，但在 firefox 中，position:absolute 没有用（页脚不会粘在页面底部）。

我尝试了各种解决方案，例如添加以下 CSS:

body {
    position: relative
}

或使用

.footer {
    height: 80px;
    position: absolute;
    text-align: center;
    bottom: 0;
    min-height: 80px; /* adding this as a property */
}

但没有成功。

我找到的大多数答案都为在使用表格时遇到此问题的用户提供了解决方案，但我的情况并非如此。

有人知道可能的解决方案吗？

谢谢。

Answer 1

试试这个

.footer {
  position:fixed;
  bottom: 0px;
  height:80px;
}

Answer 2

确保 body 和 html 标签高度为 100%，我也遇到了这个问题，我找到了解决方案。

<!DOCTYPE html> <!-- Dont forget to add this -->
<html>
<body>
<div id="wrapper" class="container">
    <div>Header</div>
    <div class="content-custom">Content</div>
</div>
   <div class="footer">Footer</div>
</body>
</html>




   *{
        padding:0px;
        margin:0px; 
    }
    html {
        position: relative;
        min-height: 100%;
    }
    body{
        height:100%;
        padding-bottom:80px;
    }
    .footer {
        height: 80px;
        position: absolute;
        text-align: center;
        bottom: 0;
        width:100%
    }
    .container{
        display:block;  
    }

Answer 3

试试这个fiddle

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
}
#content {
    padding-bottom:80px;   
}

Answer 4

因此，在采用 Muthukumar 提供的解决方案之后，这是让它为我工作的最终代码：

HTML

<div id="wrapper" class="container">
    <div>Header</div>
    <div class="content-custom">Content</div>
    <div class="footer">Footer</div>
</div>

CSS

.footer {
    height: 40px;
    position: absolute;
    text-align: center;
    bottom: 0;
}

.content-custom {
    padding-bottom: 40px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    height:100%;
    padding-bottom:40px;
}

Firefox - 绝对位置的页脚不起作用（无表格）

Firefox - footer with absolute position not working (no tables)

html

css