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.
Related
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
So i built this website (using Angularjs) and for whatever reason, in one of the pages, the footer is keep floating no matter whatever i do.
You can see the issue here:
http://www.deliverightlogistics.com/howitworks
While if you go here, you see the footer positioned in the right place:
http://www.deliverightlogistics.com/ourprocess
The weird part is that given that they both generated into the same Angular content (ng-view), i can't find the reason why i have this issue in one page and not the other.
Keep in mind that I would need a change that would fix the problem but not causing other pages' footer to 'misbehave'.
Thx
This isn't an Angular issue, but a CSS one. In your style.css, you have both #howitworks_second and #howitworks_second article positioned absolutely. Take those declarations out, add a clear: both; to the footer, and your footer pops back to the bottom.
I know everyone has problems with their footers, and I have traversed many with no success in practice.
The height of my footer is 121px, the padding-bottom of the main content is 121px.
The elements are positioned absolutely, thus taking them out of the natural flow of the document. Could this be where the problem is?
The CSS is now too big to paste somewhere (unless you have a free 5 mins in which case its at I have stripped it of content and info for the js fiddle)
Thanks.
Clarification: essentially it's a 'sticky footer' so if the content doesnt fill the page the footer sticks to the bottom, then it will scroll down with content. However, the content goes underneath it and stays where it first was on the page.
i dont know what you exactly want to know.. but if you just want to know how your footer is on the bottom of your page, even if the page got scrollbars, you just have to give your css id bottomwrap the position fixed
#bottomwrap {
position: fixed;
}
I'm trying to have a sticky footer on my page but with a twist compared to what I've seen before.
The top of the footer as to always be sticky at 50px after the content and a green color as to fill the rest of the footer until the end of the page.
You can see an example on http://enviro2012.tapagecommunication.com
The problem is even better illustrate if you clicl on the "send" button in the Facebook plugin at the bottom of the page.
Let me know if you need more info! :)
Thanks!
I've had this one before. I tried all sorts of methods, including checking the window height against the vertical position of the footer, then setting the footer height to the difference. It didn't work too badly across most browsers.
However, the most simple (and fast-rendering) solution was to add enough bottom padding to the footer to cover the gap on most window sizes. Assuming your content is always going to fill the majority of the page, a few hundred pixels should be more than enough – and renders properly the first time the page loads.
This question is a total noob one, but I can't get the difference between a normal footer and a sticky footer.
Taken from CSS tricks:
The purpose of a sticky footer is that it "sticks" to the bottom of
the browser window. But not always, if there is enough content on the
page to push the footer lower, it still does that. But if the content
on the page is short, a sticky footer will still hang to the bottom of
the browser window.
Here is a clear idea of what a Sticky footer is: https://css-tricks.com/couple-takes-sticky-footer/
And
http://css-tricks.com/sticky-footer/
And an example: https://getbootstrap.com/docs/4.0/examples/sticky-footer/
From CSS Tricks,
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
I would guess a sticky footer is one that stays fixed to the bottom of a page, regardless of the length of content. Like this.
I assume a sticky footer stays at the same place on a screen all the time. In what context?
A sticky footer is anchored to the bottom of the browser view port, as opposed to the bottom of the entire page. It retains its position relative to the bottom of the browser as the page scrolls.
the sticky footer will always remain at a fixed position on the screen no matter you scroll or not.It will be visible all the time at that specific place.
You can zoom out this page : http://maedeh.arianblog.com/ and also http://stackoverflow.com and compare what happens for their footers!
hope it helps!
This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6).
How to use the CSS Sticky Footer on your website,
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.