DMS 2 Full height div pushes down footer under viewport, how to get a sticky footer

[selmakdesign 3]

Hello,

 

I've had this issue before with no real resolution in spite of all efforts and here we go again.  :jig: 

 

There seem to be no settings or codes that can fix the issue of the footer sitting in the middle of the screen when there's not enough content to fill the space on larger screens. (see attached)

 

 

Here are the suggestions that I have found so far both scanning the forum and discussing with Danny:

 

a) There is not enough content

 

- True, but some pages just don't have tons of content and I can't fill it with content only to satisfy large screens.

 

b) A margin in the footer is to blame or a footer plugin (http://forum.pagelines.com/topic/33972-white-space-under-footer/?hl=footer9)

 

- Margin is set to 0px and I don't have a footer plugin installed.

 

c) Set the main canvas to height: 100% or 100vh to make it full screen

 

- This is the closest option so far, BUT it pushes the footer below the screen even when there's only a tiny bit of content on the page. This was brought up as a topic last week ( http://forum.pagelines.com/topic/37998-how-to-make-the-template-section-the-full-height/?hl=full+screen)but the only reply so far is a link on making the screen full WIDTH which wasn't even the question.

 

d) The solution suggested by Danny on another website I worked on (luckily my client was happy enough with that): Fill the empty white space below the footer with the same colour as the footer.

 

- Not everybody is that forgiving, and now I'd actually need the footer to sit at the bottom of the page. Not in the middle and not below.

 

NOTE THAT THE BUILT IN FULL SCREEN OPTION ON FOR EXAMPLE THE REV SLIDER ALSO CAUSES THE FOOTER TO DROP BELOW THE VIEWPORT!

(I checked the code for this option and it's just setting the div to 100% height, that's all)

 

 

How much it drops seems to change depending on screen size / resolution. I check for different sizes here: 

http://quirktools.com/screenfly/

 

Now here's what happens when assigning .fullscreen to the main canvas:

 

.fullscreen {

  height: 100% !important;

}

 

Nothing happens!, The footer is still in the middle of the page where there is "too little" content

 

.fullscreen {

  height: 100vh !important;

}

 

Puts the footer below the viewport. But actually pops up to the middle when using the built in grid gallery!

 

 

 

Then how about fiddling with the footer canvas instead?

 

Tried that too! But in my opinion it all boils down to the option or settings for a sticky footer not being built into the structure to begin with!

 

It would have been so easy to achieve with a static html page, just building up the structure from scratch, but who the h#ll wants a static website nowadays :lolu: 

 

 

So that's my research, now PLEASE does anyone have a solid solution to the sticky footer? A theme update maybe?  :cool: 

[Danny+ 1,327]

You can not apply a sticky footer without custom code, which isn't something we can assist you with. For a sticky footer to work, you will not be able to use the Footer region in DMS. Therefore, as this would require extensive CSS and maybe even PHP to produce. I think the best course of action would be for you to contact one of our Pros and get them to assist you.

To get a list of PageLines Pros and Agencies, please contact our helpdesk and they will provide you with a list.

[selmakdesign 3]

Got it! I'll also be waiting for the shiny new theme update where sticky footers are enabled  :angel:

[Danny+ 1,327]

No problem.