Question

我有一个固定位置的页脚，我试图保持在页面底部，但是当我调整大小时，它也不会跟随浏览器窗口。因此，如果我从底部拖动Firefox，则会隐藏它。

我尝试了相对位置，这使得页脚跳起并坐在标题下面。我也尝试过绝对的位置，我认为它是正确的位置，但似乎与固定位置做同样的事情。

CSS：

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased;
}               
#wrapper {
    min-height: 100%;
    position: relative;
}
#header {
    width: 100%;
    padding: 10px; 
    background-color: #fff;
    position: relative;
    -webkit-box-shadow: 0px 0px 30px #7a7a7a; 
    -moz-box-shadow: 0px 0px 30px #7a7a7a; 
    box-shadow: 0px 0px 30px #7a7a7a;
}
#content {
    padding: 10px;
    padding-bottom :45px;
}
#footer {
    width: 100%;
    height: 45px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #222;
    margin: 0;
    padding: 0;
}

有什么想法吗？

Answer 1

我相信我已经解决了你的问题。您需要像以前一样使用position: absolute;，但不是从底部指定位置/位置，而是必须从顶部指定它，如下所示：top: 500px;这样您就可以在页脚上方插入内容即使您调整浏览器窗口的大小，它也会保持原样！

编辑：经过一些研究后，我发现另一种方法是将内容放在包含块（这是一个位于相对的元素，< strong>绝对，或已修复），然后将其放在文档源的底部，然后从那里开始。

窗口调整大小时隐藏的页脚？

1 个答案: