Topic on Skin talk:Chameleon

I spent many hours to achieve this with no conclusion:

Doing this assures that the footer is sticky at the bottom of the screen, even if there is more content on the page. You are able to scroll down and see all the content available as you proceed.

@media only screen and (min-device-width: 768px) {
    .smwofootergrid.container {
        position: sticky;
        bottom: 0;
    }
}

.smwofootergrid.container {
    width: 100%;
}

Good. Now the big issue. This solution has two big issues.

1) One mobile devices the footer takes up about two thirds of the screen from the bottom, i.e. there is only a small window to look through at the content.

2) Assume that I have only one line of text on a wiki page. So the footer comes right after that and I have about two thirds of the screen from the bottom which is unused. That's equally bad.

Alternatives I have tried.

html,
body {
    height: 100%;
    margin: 0;
    padding:0;
}

.smwomaingrid {
    min-height: 100%;
}

Alle the tips in forums suggest to add a min-height of 100% to the content area. This however leads to the issue that even if I have just a line the footer is positioned way below the actual end of screen and one needs to scroll to see the footer.

Doing the following is a compromise:

html,
body {
    height: 100%;
    margin: 0;
    padding:0;
}

.smwomaingrid {
    min-height: 65%;
}

The issue here is that I still have a couple of centimeters of white space until the end of the screen.

What I am looking at is having the footer sticky a the bottom just for desktops and have the footer align to the bottom of the screen even if only one line of text is there, both for desktop and mobile.

I am absolutely clueless.

Actually no. The footer should not be sticky at the bottom of the screen. If there is more content that one has to scroll. However the footer should be at the bottom of the screen even if only one line of text is on the page. This is how things would appear sane. Any help much appreciated.

Maybe wrapping navbar and smwomaingrid in a wrapper and then playing with the padding and margin of the wrapper could help. Did not try, though. See https://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer#answer-20611729

I wrapped both into a grid but the result is even worse. Having a div within a structure causes fatals.

This is painful. This post presents a solution, which is not working, but links to another one which is working better. The second one hover has glitches on mobile when one scrolls down the page completely.

I am quite happy now and this is the only issue I currently see. I think it is not a big issue since one hardly has only one or two lines of content on a page.

I have the exactly same problem. Im using Chameleon + bootstrap3. What exact files i need to modify to use the sticky footer?

Thanks!

This is the commit made to the .less file used by Chameleon. ".smwofootergrid.container" is the class wrapping the footer. Change this to the class name you are using for your footer. This solution appears to be much easier than I originally expected.