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.
Related
Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
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/
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 have a web site where I use a footer with a black background. On long pages, my footer is correctly adjusted on the bottom of my page. The problem occurs on small pages when I don't have any scrollbars. In this case, my footer in not at the bottom of my window browser and after the footer (with black background) we still see white background after the footer.
How can I proceed to have my black footer expanded until the bottom of my window browser?
Here is a live example: http://jsbin.com/okobeh/2/edit#javascript,html,live
On this example, you see my footer and below this footer we see white space.
Thanks.
May be you want sticky footer technique check this http://ryanfait.com/sticky-footer/ .
Check this http://jsbin.com/okobeh/4/edit#html,live
position: fixed and bottom:0px: http://jsbin.com/okobeh/3/edit#preview
Lookup in the code of this example http://webmolot.com/recipe/css/element6/
If "position: fixed and bottom:0px" then add margin-bottom:{height_of_footer}px; to the content block (#body)
I believe you are looking for: http://jsfiddle.net/pratik136/Sz8ex/
Besides the changes to your CSS, I have added some HTML changes. An outer div that encloses the Header, Body and Footer.
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.