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

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

html css firefox

Html Firefox-绝对位置不起作用的页脚（无表格）,html,css,firefox,Html,Css,Firefox,我在firefox上遇到了一个小问题。我正在尝试将页脚放在页面底部。我在这里找到了一个粘性页脚示例：我已经调整了那里的解决方案以适合我的应用代码如下： CSS .footer { height: 80px; position: absolute; text-align: center; bottom: 0; } #wrapper { min-height: 100%; position: relative; } .content-custo

我在firefox上遇到了一个小问题。我正在尝试将页脚放在页面底部。我在这里找到了一个粘性页脚示例：

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

代码如下：

CSS

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

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

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

.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;
}

HTML

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

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

或使用

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

但是没有成功

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

有没有人想到一个可能的解决办法

谢谢。

试试这个

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

确保正文和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;  
    }


标题
内容
页脚
*{
填充：0px；
边际：0px；
}
html{
位置：相对位置；
最小高度：100%；
}
身体{
身高：100%；
填充底部：80px；
}
.页脚{
高度：80px；
位置：绝对位置；
文本对齐：居中；
底部：0；
宽度：100%
}
.集装箱{
显示：块；
}

试试这个

CSS:

因此，在修改了Muthukumar提供的解决方案后，这是最终的代码，使它为我工作：

HTML

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

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

我在包括Firefox在内的不同浏览器中打开了你提到的链接，它在任何地方都运行良好。也许你在某个地方有冲突的风格，或者遗漏了什么？我提供的链接是我修改过的粘性页脚的例子。这不是我的网站。我会仔细检查一下，看看我是否遗漏了什么。关闭，但它与内容divOk重叠使用这个html，body{position:relative；min height:100%；}。footer{height:80px；position:absolute；text align:center；bottom:0；width:100%}是的，这样做了。我不得不稍微调整一下以适应我的应用。我很快就会把它寄出去。谢谢