如何将页脚固定为4k分辨率？

Question

当我设置为4k分辨率时，页脚会升高，并在其下方显示一个空白。

我尝试将html的高度设置为100％，但这不起作用。

] 1

Answer 1

尝试将以下CSS添加到页脚类中

.footer{
  position: fixed;
  bottom: 0;
}

Answer 2

SO中有许多不同的解决方案，其中大多数使用CSS，但是，我发现最好的方法是使用JavaScript来使页脚位于页面底部。窗口调整大小。这是使用JQuery的代码示例：

$(document).ready(function() {

    function adjustFooter() {
        var footer = $("footer");

        if ($(document).height() > $(window).height()) {
            footer.css("position", "inherit");
        } else {
            footer.css({"position": "absolute", "bottom": "0"});
        }
    }

    $(window).resize(function() {
        adjustFooter();
    });

    adjustFooter();

});

这是HTML：

<footer>
    <p>&copy; 2019 <strong>SomeBrand</strong> - All rights reserved</p>
</footer>

Answer 3

您可以计算主要内容的高度，以使页脚始​​终位于底部。像这样：

.header{
  height: 50px;
}
.main {
  height: calc(100vh - 100px);
}
footer {
  height: 50px;
}

JSFiddle