Html 我的页脚卡在视口底部

Html 我的页脚卡在视口底部,html,css,Html,Css,我正在为客户创建一个网站。你可以在这里看到://关闭答案后删除链接 但我的页脚也有同样的问题 它卡在borwsers wievport的底部,而不是我页面的按钮。如果尝试放大和缩小浏览器,您将看到问题所在 我试着把我的页脚放在主包装的外面,但结果是一样的 我的页脚css: #footer { position: absolute; width: 1297px; background-color: #fff; z-index:2; height: 100px

我正在为客户创建一个网站。你可以在这里看到://关闭答案后删除链接

但我的页脚也有同样的问题

它卡在borwsers wievport的底部,而不是我页面的按钮。如果尝试放大和缩小浏览器,您将看到问题所在

我试着把我的页脚放在主包装的外面,但结果是一样的

我的页脚css:

#footer {
    position: absolute;
    width: 1297px;
    background-color: #fff;
    z-index:2;
    height: 100px;
    left:50%;          
    margin-left:-648.5px;
    bottom:0px; 
}
编辑:


我现在已经在网站上添加了固定位置。但我还是有同样的问题

如果位置固定,则页脚在屏幕底部始终可见。我需要它在这一页的底部。因此,它永远不会与我的
#子容器重叠

编辑2

我已将我的页脚移到主包装外,现在我的页脚如下所示:

#footer {
    background-color: #fff;
    position:absolute;
    left:50%;  
    bottom:0;
    height: 100px;
    width: 1297px;
    z-index:2;          
    margin-left:-648.5px;
    overflow:hidden;
}
尝试使用

position:fixed;
而不是

position:absolute;
并放置
底部:0px右后<代码>位置:固定。
希望能有帮助

加上身高实验:

body{height:1000px;/* or more, or less*/}

更改其值,直到您的页脚不会使其他主体不可见。

word中的真实答案

谢谢,我把我的页脚放在主包装里,把它修好了。给 主包装器a高度:自动;而不是100%然后说 位置:相对位置;页脚

您可以使用绝对值

您在div上设置了position:absolute,它只会根据占用的空间大小使用CSS height值,而不管其实际内容如何。去掉这个绝对位置应该可以解决你的问题。绝对定位(几乎)总是有办法的。在您的示例中,它似乎完全没有必要


为什么不使用:
{position:fixed;bottom:0}

不幸的是,这将产生相同的结果。我已经尝试了您的解决方案,我将position:fixed;底部:0px;刚好在…之后。但我不是在寻找一个固定位置的解决方案。因为它仍然会与我的内容重叠,因为页脚将始终设置在浏览器视口的底部。(和页面底部)但仍将重叠。@Adnaves,但我已编辑
body{height:1000px;/*或更多,或更少*/}
我现在添加了固定位置。但我还是有同样的问题。如果位置固定,则页脚在屏幕底部始终可见。我需要它在页面的底部。修复只是一个选项,你可以使用绝对也这就是为什么我已经包括或看到了演示我已经看到你的演示,但我不明白为什么它与我在第一个地方做的不同。我尝试将您的代码添加到站点,但没有更好的结果…页脚{position:absolute;bottom:0;left:0;}阅读此