Stick the footer to the bottom of the page

[Support]

igml:
“Hi, is it possible to stick the footer to the bottom of the page? I a page with only one control and that is causing a blank space after the footer. It’s not looking good. Thanks.”

---

[Support]

Hello, if you want to make the footer fixed at the bottom for pages with small content here’s what you can do:

Add this to the file css/custom.css:

html, body {
    height: 100%;
    width: 100%;
}

div.body {
    display: table;
    height: 100%;
    width: 100%;
}

header, div.main {
    display: table-row;
}

div.main {
    height: 100%;
}

div.main > .container {
    display: table;
    height: 100%;
}

Thanks.

---

[Support]

Hello, we tested it in the latest version before posting the code, is it possible for you to send me the URL of your website so I can take a look and make a few tests? Thanks 🙂

---

[Support]

Ok, yes, the HTML is a bit different and the CSS I sent won’t work, so please use:

html, body, #mainForm {
    height: 100%;
    width: 100%;
}

div.body {
    display: table;
    height: 100%;
    width: 100%;
}

header, div.main {
    display: table-row;
}

div.main {
    height: 100%;
}

div.main > .content > .container {
    display: table;
    height: 100%;
}

Please let me know if you have any further questions.

Thanks.

---

[Author]

Posts