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;
}
Related
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
The content of the main article on my site changes dynamically with AJAX. I want to add a footer to the site but because I can't set a static height the footer always appears at the same position as the article (as if the article didn't take up any space at all in the DOM).
I guess the easiest way is to show visually what happens: my site here
If you look at the footer when the page loads you'll notice it's stuck behing the article.
Delete this line for #mainSection .mainArticle:
position: absolute;
Absolute positioning takes your article out of the flow, deleting this line will make its positioning static, and this will make those elements on top of each other as intended.
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
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.
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.