Question

下面是一个非常简单的示例，说明我在页脚中遇到了一个问题。如果页面的内容没有填充视口，则将页脚视为静态放置的元素。我意识到这在技术上是position: sticky的预期行为，但是我想知道是否有一种方法可以在这种情况下强制将其始终为position: fixed。我不想从文档流中删除该元素，这就是为什么我不只是将其永久更改为固定。另外，页面的高度（根据内容）可能会有所变化，因此如果页面的长度大于视口，则需要具有粘性。

html { height: 100%; }
body { min-height: 100%; }
.content {
    width: 100%;
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.footer {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

<html>
  <body>
    <div class="content">
      Here is some sample content
    </div>
    <div class="footer">
      This is the sticky footer
    </div>
  </body>
</html>

Answer 1

此代码将根据相对于窗口高度的文档高度来更改页脚样式。

function init() {
    if (window.innerHeight < document.body.clientHeight) {
        document.querySelector(".footer").style.position = "sticky";
    }
    else {
        document.querySelector(".footer").style.position = "fixed";
    }

window.onload = init;

粘性页脚在短页上被迫移至底部

1 个答案: