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中，位置：绝对没用（页脚不会粘在页面底部）。

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

body {
    position: relative
}

或使用

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

但没有成功。

我发现的大多数答案都为使用表时遇到此问题的用户提供了解决方案，但这不是我的情况。

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

感谢。

Answer 1

确保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 2

所以，在调整了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;
}

Answer 3

试试这个

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

Answer 4

试试这个fiddle

CSS：

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

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

4 个答案: