Stick footer to bottom when page content is less

[Ludovic]

Hi there,
I come to you today to report a minor CSS bug (to be checked if it does the same for you):
When I load a page and the content is shorter than the size of the screen, the footer does not go to the very bottom of the screen, it is placed correctly only if, afterwards, I resize my window.
I made a short screenshot for you to make it clearer:

Download Berrycast - Record Your Screen & Share It With Ease

Dead simple to use screen recording tool. One-click record and share. Mic & webcam support, annotations, password protection, trim videos, & more.

screen.ludovicclain.com

Thank you for your help!
Warm regards,
Ludovic

 

[traphouse]

I also noticed this issue. @Ludovic I could not see it on your screen-recording, but this matches what you described and I could reproduce it in the backend of the Mailwizz demo.

The footer does not stick to the bottom of the page and I also noticed that the sidebar is not the full height of the window when loading a page with less content than the previous page while browsing in a "long" window.

 

[traphouse]

I resolved the issue by adding the following css to /backend/assets/css/style-custom.css
and /customer/assets/css/style-custom.css

/* Page full height */
html, body {
    height: 100% !important;
}

/* Make footer stick to page bottom */
.skin-blue .main-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

I have only tested this on the backend and customer, not the frontend.

MailWizz has some inline css for the min-height of a div with class "content-wrapper".
I think that could be removed after making the above changes. But I have not figured out how.

 

[twisted1919]

@laurentiu

 

[laurentiu]

I have only tested this on the backend and customer, not the frontend.

MailWizz has some inline css for the min-height of a div with class "content-wrapper".
I think that could be removed after making the above changes. But I have not figured out how.

I will look into this and come back with an answer as soon as possible.