如何修复 4k 分辨率的页脚？

Question

当我输入 4k 分辨率时，页脚会升高，下面会出现空白 space。

我尝试将 html 高度设置为 100%，但它不起作用。

]1

Answer 1

尝试将以下内容 CSS 添加到您的页脚 class

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

Answer 2

在 SO 中有许多不同的解决方案，其中大多数使用 CSS，但是，我发现最好的解决方案是使用 JavaScript 来保持window 调整大小时页面底部的页脚。这是使用 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

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

* {
  margin: 0;
  padding: 0;
}

.header,
footer {
  height: 50px;
  background-color: red;
}

.main {
  height: calc(100vh - 100px);
  background-color: green;
}

<div class="fluid">
  <div class="header bg-warning"></div>
  <div class="main bg-success"></div>
  <footer class="bg-danger"></footer>
</div>

或使用flex

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header,
.footer {
  background-color: red;
  padding: 10px;
}

.main {
  background-color: green;
  flex: 1;
  min-height: 25px;
}

<body>
  <div class="container">
    <div class="header">HEADER</div>
    <div class="main"></div>
    <div class="footer">FOOTER</div>
  </div>
</body>

如何修复 4k 分辨率的页脚？

How to fix the footer in 4k resolution?

css

sass

footer

responsive-design