Why is my footer floating in mid air?

[jeremy4]

Hello, I have an issue with my footer floating. As soon as the widow’s height is extended such that scrollbar disappears the footer remains in the middle of the screen while the window can continue being extended below it. I’m using Ethos stack. What am I doing wrong?

[ruenel]

Hello Jeremy,

Are you referring to something like this?

This is quite normal especially when the height of your page content is lesser. Please understand that the total height of the page depends on the height of the header, footer, and the page contents. When there is nothing to display, of course the footer will leave an empty space below it.

And if you want to make sure that the footer will always stick to the bottom of the browser window, you will need to use a custom css to set a minimum height for the page content area. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-main,
.x-sidebar {
    min-height: calc(100vh - 267px);
}

wherein the 267 pixels is the total height of your header, landmark header and the footer.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would love to know if this has worked for you. Thank you.

[jeremy4]

Hi RueNel, thanks for your help. In theory, the Global CSS should work, but I’m experiencing some glitches there. I’m simply setting background and footer to the same color. Not the perfect solution, but visually it works. Thanks again!

[Prasant]

You are most welcome.