Hack Forums
[Feedback] Footer not at bottom of the page where there isn't enough content [Fix included] - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Hack Forums Official Information (https://hackforums.net/forumdisplay.php?fid=1)
+--- Forum: Site News (https://hackforums.net/forumdisplay.php?fid=2)
+--- Thread: [Feedback] Footer not at bottom of the page where there isn't enough content [Fix included] (/showthread.php?tid=6146452)

Footer not at bottom of the page where there isn't enough content [Fix included] - Exalted - Mar 26, 2021

Alright, so I've been using a high-resolution laptop for a while now and keep getting annoyed by the footer not sticking to the bottom on pages where there isn't enough content.

Here are some examples:

[Image: JOFjxFb.gif]

[Image: fKHQK9T.gif]

[Image: 6ttmtfO.png]

Here's some CSS to overwrite this behavior (Needs to be tested on lower-resolution screens):

Code
@media (min-width: 768px) {
    body{
        min-height:100vh;
        margin:0;
        position:relative;
    }
    body::after {
        content: '';
        display: block;
        height: 75px;
    }
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

This will make the footer behave as it should:

[Image: AErI4bc.gif]

[Image: 7JkigVZ.gif]

[Image: vuo0IdN.png]

Can we get this added to the global CSS file?

If not, I also made this as userscript for the people that also experience this annoyance:

Code
// ==UserScript==
// @name         HackForums Footer Fix
// @namespace    https://hackforums.net/
// @version      0.1
// @description  HackForums Footer Fix
// @author       Exalted/4541508
// @match        https://hackforums.net/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function() { 'use strict'; GM_addStyle(`@media (min-width: 768px) {body{ min-height:100vh; margin:0; position:relative; } body::after { content: ''; display: block; height: 75px; } #footer { position: absolute; bottom: 0; width: 100%; }}
`)})();

Thanks.

RE: Footer not at bottom of the page where there isn't enough content [Fix included] - Omniscient - Mar 26, 2021

We'll review your adjustment.

Thanks for reporting.