'Dock' footer to bottom of browser area.

Question

User-1224547356 posted

Hi all,

In a mod version of the starter kit, I'm at a point where the content area is fairly small on a page, and as a result, the footer bar is displaying in the middle of the browser and there is nothing but whitespace from the middle of the screen to the actual bottom of the screen.  Is there a way I can force the CSS or something else to ensure that the footer area is truly sitting at the footer of the browser if the content area does have have enough data to fill in the area?

 TIA!
-Rich

Answer 1

User-1426124666 posted

If you want to place a footer at the bottom of the browser window then you can do so with absolute positioning. However, this means that if your content is longer than the height of the browser window your footer will sit on top of the content.

One solution is to place your content in, for example, a div which is also set to the height of the browser window minus the height of your footer. Then set the overflow of the div to auto, or hidden. This should render scroll bars if you have too much content.

Answer 2

User-1224547356 posted

Thanks ca8...

I'm looking specifically at the Personal Site Starter kit, forgive my ignorance, I'm normally the data guy and not the CSS guy :)

In my ~/AppThemes/White/Default.css...and/or in each page, where would I make such a change to ensure my footer, when the content is less than 100%, is not sitting higher than the bottom of the browser?  I found an article on using the 'footerStickAlt' method, here, but it doesn't seem to want to play well with the starter kit.  Any ideas?  Again, I apologize, I may need an actual code example if anyone can provide one.

 Thanks,
-Rich