I have an issue where my footer only is stuck to the bottom of the page on the index, applying any sort of "sticky footer" CSS fixes the footer for every other page, but breaks the footer for index. As in, it floats up.
Here is the general CSS I've tried:
position: absolute;
bottom: 0;
width: 100%;
Which again, works fine on most other pages, however not on the index.
You can see my live index here: http://goo.gl/XUUCjW
And an example of a non sticky footer on one of my pages here: http://goo.gl/uhd1h4
The way I get around this is to do the following:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
The reason for the margin-bottom on the body is that when you push the footer to the bottom it will overlap the content of anything above it. I found that 60px worked well for me but you may have a deeper or smaller footer so adjust accordingly.
Related
I have a site I am working on. I want to get the footer to stick to the bottom of the page.
So I followed a simple guide which basically did this:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
padding-bottom: $footer-height + $footer-margin-top;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: $footer-height;
}
This seemed to work at the start. Then I got to a stage where the content was more than the view port height and that is when things stopped working.
If you look at this you can see that the footer is at the bottom of the page.
But if you look at this, the footer is at the bottom of the viewport.
I know this is a simple fix, but I can't figure it out.
Can someone give me a hand please.
You want your footer to stick at the bottom of the page unless the content on body is large enough that it appears after you scroll?
If so, you should set height: auto; on your body tag, so if it's more than 100% set on your min-height rule, it's taking into consideration and pushes the footer towards the bottom.
Let me know if that's your intended behaviour.
Change
position:absolute for .footer to position: fixed
.footer {
position: static;
right: 0;
bottom: 0;
left: 0;
height: $footer-height;
}
Having big problems getting the footer to stay at the bottom of the page.
I've decided to add the code to pastebin:
This is the css: http://pastebin.com/uf2c7jLX
This is one of the pages: http://pastebin.com/qpwz22us
The problem is consistant throught the site. What am I doing wrong?
For example, sometimes this happens, some content is hidden by the footer:
There is a huge gap between the bottom of the browser view and footer. The image above also shows that the footer is overlaping the content.
About the edit: The second is not what I want either. There is a huge gap between the footer and the bottom of the browser. I want the footer to be at the bottom and if the content is so long that you have to scroll then the footer should not be visible until you reach the bottom of the page. Thank you :)
edit: actually I just saw your screenshots, just change the absolute positioning to relative
Change the positioning of the footer and body and remove margin from the footer:
body{
margin: 0;
padding: 0;
/*padding-bottom: 60px;*/
width: 100%;
height: 100%;
position: relative;
}
footer{
position: relative;
background: cornflowerblue;
height: 60px;
width: 100%;
}
here is the fidle http://jsfiddle.net/vFg8j/
another useful resource - sticky footer http://ryanfait.com/sticky-footer/
I'd like my footer to be at the bottom of the page all time, because my pages aren't that long.
But when a page is longer than the screen, it needs to be underneath the content like a proper footer and not stuck at the bottom of the screen.
This may help;
jQuery Sticky Footer
demo
If your footer has a fixed height, the most simple and CSS-only solution is this:
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* height of the footer */
margin: 0 0 120px 0;
}
footer {
position: absolute;
bottom: 0;
height: 120px;
}
DEMO
Try it with short content
Try it with a lot of content
Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:
html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
html,body,#wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
}
#header {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
color: white;
background-color: #000000;
}
#content {
position: fixed;
padding-bottom: 50px; /* to match the footer height*/
top: 40px;
bottom: 50px;
height: 100%;
width: 100%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
height: 49px;
width: 100%;
border-top: 1px solid #000000;
background-color: skyblue;
font-weight: bold;
}
The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are always in view. Header up top, footer on the bottom and content in the middle respectively.
The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page.
The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel must be inside the content div, not page-wide.
I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.
I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).
Here's how it looks right now, notice the scroll-wheel problem on the content div:
I hate when this happens...I found the solution just after I posted, decided to try one more thing: I've set the #content height to 'auto' and that did it (since once I drew my own attention to the scroll-wheel, it became apparent the problem is with the div height)! Just need to test and make sure that's the case with all/most browsers!
Maybe it will be helpful to someone else though!
OK, So i've used to common "push" method with the footer to ensure that it stays to the bottom of the page... However, there is now an unnecessary gap between the container and the footer which means that there is always a scroll down, even if there is no content to push it down. I would hope that if there was no content, the footer would just stick nicely to the bottom of the website.
Has anyone else found this and been able to tackle it?
Thanks in advance :)
This can be done with just a few lines of CSS. Assuming that you are using the <footer> element, apply the following styling properties:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
And that's it!
I use
#footer {
position: relative;
left: 0px;
bottom: 0px;
height: 150px; // whatever height you want
width: 100%;
}
works for me