Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Reply To: How to stick the footer at the bottom?

Home Forums Support How to stick the footer at the bottom? Reply To: How to stick the footer at the bottom?

Home Forums Support How to stick the footer at the bottom? Reply To: How to stick the footer at the bottom?

#103966
David

I just thought I would throw this out there. As Tom mentioned, this solution is definitely hacky since I’m hardcoding several pixel offsets for headers, footers, and other formatting. As such, the values will be different for others and some may not be needed. With that said, the following CSS allowed me to force the page to take up the entire height of the window with the footer on the bottom. I haven’t spent enough time ensuring that none of the CSS is redundant or unnecessary but this was what worked for me and functions properly in all modern browsers as far as I could tell.

* {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
    overflow-y: auto;
}

body {
    height: 100%;
    min-height: 100%;
}

#page {
    height: calc(100% - 150px);
    overflow: hidden;
    width: 100%; 
    display: table;
    table-layout: fixed;
    margin-bottom: -32px;
}

#content {
    height: 100%;
    width: 100%;
    display: table-cell;
    table-layout: fixed;
}

#primary {
    height: 100%;
}

#main { 
    height: calc(100% - 50px);
}

article {
    height: 100%;
    padding-bottom: 32px;
}

.inside-article {
    height: calc(100% - 80px);
}

.site-footer {
    margin-top: -32px;
    height: 32px;
}