I have a header fixed at the top of the page and wish have the footer fixed at the bottom of the page so the page content scrolls between & behind them. I can’t seem to find the right settings for the footer so that it shows up on the bottom of browser window no matter the size of the window or screen. Is there a way to do this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter wrote an action a while ago for those who doesn’t know squad about CSS … Sticker - ActionsForge
This would probably help you out …
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I have a header fixed at the top of the page and wish have the footer fixed at the bottom of the page so the page content scrolls between
The problem with trying this using a fixed in window method (like Sticker) Is that when you reduce the browser window height the gap between the header and the footer becomes Zero - no content visible.
Better to use an inline construction so that the footer cannot obscure the content above.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I couldn’t agree more.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
David, could you tell me how I would need to set the footer element so it would adjust itself to alway be on the bottom of the browser window? A fixed in window element won’t work for the footer like it does for the header…Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So to be perfectly clear here… what I would like to see is the footer always shown at the bottom of the browser window and content scrolled behind it. I saw Walter referred to this as the ‘holy grail’ in a older post.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Figured it out!
By adding the following extended div styles to the footer element:
position:fixed;
bottom:0;
z-index:999999;
It sticks to the bottom of the browser window and the content scrolls behind.
By adding these div styles to the header it does the same:
position:fixed;
z-index:99998;
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Figured it out!
So what do you get when you reduce the window height to the combined heights of the footer and header?
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I built the page using the inline method with 3 elements, header, body and footer. When I reduce the size of the body to 1px I still get the header fixed at the top and the footer fixed at the bottom of the browser and the ‘content’ area expands and shrinks with the browser window
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
or… leaving all the content in the body and just making the browser smaller will eventually put the footer on top of the header
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Actually, that was different. The Holy Grail is that the footer appears at the bottom of the screen unless the content drives it further down. So the footer appears at the bottom of the screen on short pages, and at the bottom of the content on tall pages. It’s quite simple to place a footer visually at the bottom of the screen – since that just ignores the rest of the page content entirely. The actual holy grail is the “have your cake and eat it too” sort of thing, because the footer pays attention to the content unless there isn’t enough of it.
So to put your footer at the bottom of the screen, and keep it there, draw your content element, and while it is selected (corner handles showing) look in the Inspector and set the following attributes:
Change the position picker (it’s not labeled, but it is near the top-right of the Item Inspector) from Absolute to Fixed in Window. In the Dimensions segment, set the bottom position to 0, and click on the little icon left of the top position to deselect it (it will gray out and no longer allow you to edit the numbers in there). Set the width to 100% and the left to 0. Now if your page is actually centered in the browser, your footer will be smacked over to the left of the screen, so to fix that, insert a child HTML element inside your footer, set it to your desired “page” width, and then set its alignment to center. This child element will then be the parent of whatever footer content you want to display.
The last thing you need to do is put a “shim” at the bottom of your actual page content to allow for the height of your footer. Without that, your page content will never scroll high enough to show the bottom bit of content – it will remain stuck underneath the fixed-in-window footer. By adding an empty graphic box or empty HTML box inline within the content, or by setting the bottom padding of the last element of your page content to a large-enough value to force an empty space to accommodate the footer, you will be able to scroll up to see everything. That last option (padding) is actually the best solution from a semantic standpoint, since any empty element you place there for spacing would be extraneous non-content. CSS is meant to be abused in this manner, since it is purely visual (as opposed to HTML, which is always content).
Walter
On Feb 22, 2015, at 7:36 AM, Seth Rosenblum email@hidden wrote:
I saw Walter referred to this as the ‘holy grail’ in a older post.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the clarification Walter 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
And furthermore keep in mind, that this construction makes extremely fun on mobile-devices. Apart from the fact, that it could end up in a mess, you have a screen-height of 480px on an average cell available. So keep fixed content (top/bottom) as thin as possible, to prevent you from covering your scrollable content.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options