粘性页脚在短页上强制置于底部答案

【问题标题】：Sticky Footer Forced to Bottom on Short Page粘性页脚在短页上强制置于底部
【发布时间】：2019-03-14 04:40:30
【问题描述】：

下面是一个非常简单的示例，说明了我在使用粘性页脚时遇到的问题。当页面的内容没有填满视口时，页脚被视为静态定位的元素。我意识到这在技术上是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>

【问题讨论】：

标签： css sticky

【解决方案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;

【讨论】：

如果您删除我在 body 标签上的最小高度，这将在技术上起作用。虽然我希望避免使用 JS 解决方案并让它成为纯 CSS。