I have a footer inside Chroma. It is set to ‘static’ and should not be set to ‘fixed’ at the bottom of a page. However, I would like to force it to the bottom only on pages that are less than full-viewer-hight. Is there any solution to do so in Chroma or by other means, like using CSS, or some other way?
Perhaps the reverse would be easier? Make the footer fixed to the bottom, but push it out of the view on full-hight pages? Does that even make sense?
@TAV? Anyone?
The bottom of the document is the bottom of its content - the bottom of the browser is outside the webpage in that case and so nothing can reside there.
The only way to fix content to the bottom on pages that are not as tall as the browser is to extend the document body to the height of the browser and then monitor it and release that condition if the content becomes longer. There have been various JS snippets and unofficial stacks to do this over the years but I would never countenance doing such a thing as it can break so many other stacks that could be on a page (it is theoretically OK if you are writing your own page and know what is on there but not when other peoples stacks / frameworks expect certain properties on the body element.
Yeah, but what if I extend the body just right on my device, but then the content is viewed on a different device or the browser window will be resized? I assume from your previous answer that there is no reliable method to achieve what I’m talking about?
yes as I said here (i.e. using some JS)
You can do it but I would strongly recommend you don’t do it with a RW/Stacks page unless you are really confident in what you are doing. There are simple clean ways to do it, especially with CSS Grid, but you really need to be in control of all the content on the page and not just living inside a theme or stacks page.
Looks like I am out of date on this one - sorry but it seems that Target can do this.
Using theCondition: Target at Browser > Content it will do the JS bit for you and measure when the browser height is greater than content height.
I don’t know what framework you are using but I do something like this in Bootstrap using a variable height custom class set to 100% so the area expands or shrinks to fit the device size. I’ve also achieved something similar by setting the top margin to auto. It sounds like Tav has you covered though with his suggestion.
@TAV, @ashleykaryl – Great, guys! Now, if I only knew what to do with this… How to implement it? BTW, I am using Source framework.
(Reminder: I am not a coder.)
With Target just set the position to Pin to bottom and then in Advanced check the Add additional features box. This will give you a blue Add Child button - click this and simply add the one called Condition: Target at Browser > Content - that’s it.
@TAV – Just so I’m clear – I need to put my footer in Target stack rather than use Chroma? (I don’t have Target, so I’m not sure how it works, at the moment.)
@fapkogi Yes that is correct.
My personal opinion is still that it is an anti-pattern which is why I stopped SectionsPro content control being used for the purpose when people started doing it and why I refused to add it to Chroma when asked. My personal opinions should however not influence others.
I admire your “sticking to your guns”. As a developer, you should have the last word on whatever features your products possess. I also admire your ability to mention your competition’s product without hesitation.
Anyway, I just bought Target and placed my footer in it (using your simple instructions). Works exactly like I expected. On full-hight pages footer is invisible. On shorter pages footer is fixed at the bottom of a window.
Thanks, Andrew!
All good - the important thing is that your website works as YOU want it. :)
Target is a very useful stack to have in your armoury any how so I’m sure you will get your moneys worth.
Happy new year.