How to fix the footer in 4k resolution?

问题:

When i put in 4k resolution, the footer rises and a blank space appears below it.

I've tried to put the html height 100%, but it doesn't work it.

]1

回答1:

You could calculate the height of the main content such that footer is always at the bottom. Something like:

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

JSFiddle

回答2:

Try to add following CSS to your footer class

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

回答3:

There are a number of different solutions for that in SO, most of them using CSS, however, the approach I've found to be the best solution is to use JavaScript to keep the footer at the bottom of the page when the window resizes. Here's a code sample using 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();

});

and this is the HTML:

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