Question

我有一个网页，我使用“Supersized”jquery插件来更改背景。我还有一个页脚，只显示我是否为它添加了以下CSS：

#footer{
    width: 100%;
    color: #ffffff;
    background: #000000;
    position: fixed;
    bottom: 0px;
    height: 40px;
    padding: 5px 0px 5px 0px;
}

然而，当发生改变窗口高度的事情时，页面的内容会在页脚后面，当我向下滚动时，页脚不会停留在页面的底部 - 它会向上滚动。

例如，我有三个并排显示的div，但是当窗口大小调整为900px宽度时，div会显示在另一个下面，因此窗口高度会发生变化。这就是当div在页脚后面，它随着它们向上滚动。

我已尝试position: relative和position: static，但即使z值高的值，它也不会显示。我认为这个“不显示”是因为我用于背景图像的插件。当窗口改变高度时我也尝试了一些jquery函数，但也没有结果。有任何想法吗？提前谢谢你......

Answer 1

以下是示例：

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

main {
  padding-bottom: 30px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
}

<body>
  <header>
   header
  </header>
  <main>
   main
  </main>
  <footer>
   footer
  </footer>
</body>

Answer 2

如果您的目标是将页脚放在“页面内容”的底部并且可见，那么我建议您分配height:100%您的html代码和body代码你的CSS。另一方面，如果您希望页脚停留在“浏览器窗口/视口”的底部，那么您将需要查找"Making a footer stay put with CSS" by "JONATHAN LONGNECKER".希望我帮助过！的雅典娜
的 @ athenacreations.org 的

页脚不会停留在页面底部

2 个答案: