Menu
I have a website like this one: >> website <<. It is built from 2 frames - main and a footer. I was trying to get it working without frames (don't work on mobile phones). Is there any simple CSS or jQuery method to stick the footer on the bottom to be visible always? so the effect is like on the website above? I was trying to use css, but the footer appears only when I scroll down to it. I want the footer to cover the actual content, so it's always for example 50pixels high and is always visible on the bottom of the screen. even if the page is 10000px high. I believe it's something simple, but I got lost somewhere there. Thank you for your help in advance
376
html. < div id = "footer" >This is a footer. This stays at the bottom of the page.
However, if the page has a short amount of content on it, a statically positioned footer may not render at the bottom of the user's browser window. A sticky footer will guarantee that it is always placed at the bottom of the browser window AND after all the content, regardless of the length of content on the page.
When the footer margins are too narrow or the padding is too wide, the footer position shifts and can move to the middle of the Web page. One easy solution is to remove the margins and padding entirely, so that those footer properties correspond to the rest of the coding.
In order for this element position at the bottom of the page, you have to add fixed-bottom to the class footer .
Yes. It's the position: fixed property.
.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; } Demo: http://jsfiddle.net/ZsnuZ/
175
(function() { $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed"); })(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
