Question

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

但我的页脚也有同样的麻烦。

它被困在了wwport的底部，而不是我的页面的底部。如果您尝试放大和缩小浏览器，您将看到问题所在。

我尝试将我的页脚放在主包装外，但效果相同。

我的页脚css：

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

修改

我现在在网站上添加了固定位置。但我仍然有同样的问题。

如果位置固定，则屏幕底部始终可以看到页脚。我需要它在页面的底部。所以它永远不会与我的#sub-container

重叠

编辑2

我已经将我的页脚移到了我的主包装器之外，我的页脚现在看起来像这样：

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

Answer 1

作者单词中的真实答案

谢谢，我通过将我的页脚放在主包装中来修复它。给予主包装器一个高度：auto;而不是100％，然后说位置：相对;为页脚

你可以使用绝对

DEMO

OR

你的div上有你的位置：绝对设置，它只会使用它的CSS高度值来占用它所占用的空间量，而不管它的实际内容如何。删除绝对位置应该可以解决您的问题。（几乎）总是有一种绕绝对定位的方法。在您的示例中，似乎完全没必要

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

Answer 2

尝试使用

position:fixed;

而不是

position:absolute;

在bottom:0px;之后放置position:fixed;。希望它有所帮助。

加上身高的实验：

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

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

我的页脚卡在视口的底部

2 个答案: