Jump to content


This topic is now archived and is closed to further replies.


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

Recommended Posts




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.



(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: 



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: 

Share this post

Link to post
Share on other sites

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.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

No problem.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
      Thank you for any help,
    • Lisa Haran
      By Lisa Haran
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!