Here is a fresh variation on an old question.
I'm working on a page where the footer needs to be outside the main wrapper.
<body>
<div id="page-wrap"></div>
<footer id="footer"></footer>
</body>
I've been looking for a nice cross browser solution for implementing a footer which sticks to the bottom of the content in the page-wrap or the bottom of the page when the content in the page-wrap doesn't quite fill the page. I searched stackoverflow & a few other places. I have yet to see a solution which covers all the important browsers & allows for the footer to be outside the page-wrap.
Anyone know how I can pull this off?
CSS Sticky Footer will do it.
http://www.cssstickyfooter.com/html-code.html
Related
i have tried to implement one of bootstraps sticky footers into my cms. The sticky footer is fine until i add images to it which then the copyright note gets pushed below the fold.
You can see it here-> http://newrycreates.com/contact
What it looks like:
What it should look like:
I suggest using Developer tools in Chrome or Firebug for Firefox to hel debug this issue. A quick look at you elements shows the footer has a set height of 80px yet the image is 100px high. Change the height of your footer appropriatly.
You have positioned the base of the footer at the bottom of the page, however the contetns of the footer overflow this, hence your problem. The MDN on css overflow adds some light to this.
I have a basic website with a header, content area and footer. I'm trying to create a sticky footer so when there is little content, the footer still stays at the bottom of the page. For some reason, when there is a lot of content, it just overflows beyond the browser and no scroll bar appears.
Here is the page in question:
http://swif.co/msb/page.html
I used many tutorials to get it working but the latest one I used was http://css-tricks.com/snippets/css/sticky-footer/.
remove overflow:hidden from the body
I want to create a box-menu on the very bottom of the browser window.
It should stay at the bottom when the content doesn't fill up the entire screen
When the content overflows it should only be at the bottom when you scroll down (i.e. you can't see it if you don't scroll).
How do I do this?
I think what you are looking for is called a "sticky footer", and there are a couple of methods. I suggest you have a look at these sites:
http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/
Zoom in/out on each site in order to see how this appears when the content reaches the footer or does not.
Both methods fall short on one thing: They require you to know the height of the footer - but I have not seen any better solutions with only CSS.
I am a beginner with a site made in Dreamweaver CS4 using HTML and CSS. Every page has a slightly different amount of content. The page content is designed to 'overlap' the footer, so that the top part of the footer can be seen behind the bottom of main content (images) and the bottom of the footer lines up with the bottom of the page.
I haven't been able to achieve a position where the footer allows for the same amount (height) of content to sit over it on every page, although I have been trying with changing all the margin and padding values etc. Currently the footer is jumping around from one page to another.
What I would like is for the footer to always be below all other content but with a negative top margin / padding effect, allowing the bottom of main content to sit on top of it - I just can't seem to make it happen! Advice would be very much appreciated. Thanks in advance.
Add this line before footer
<div style ="clear:both;" /></div>
I've seen Ryan Fait's method for sticky footer as well as one here and here.
Why are these people making templates for sticky footers when #footer{position:fixed; bottom:0;} will suffice?
EDIT:
I will add that using position: fixed; for a footer does break margin: auto; centering in (at least) some browsers, thus creating the need for a wrapper tag. Part of my problem with the above mentioned methods is the extra tags which are confusing, syntactically incorrect (for the "HTML purists") and it eats bandwidth. However, a single wrapper around the footer is still, in my opinion, better than a whole jumbled page template to have to start with. And, "my" way is still more straightforward and eats less bandwidth.
The difference between using position: fixed and Ryan Fait's method1 is pretty fundamental.
When using position: fixed, the footer is always visible, and that's not what a sticky footer is trying to do.
The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height. In that case, the sticky footer will act like a normal footer, appearing just below the page content.
Here you can see the effect of a sticky footer. In the Result window, you see that the footer stays at the bottom of the page. Click on the 'Add content' button to add content, and then you will see that the footer shifts down to stay below the content.
1. This is a snapshot of 10 January 2013 from the Wayback Machine, as Ryan's website itself does not contain the original post any longer.