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/
Related
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.
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
So, I've been stuck with this problem for a while now and I can't seem to find a solution.
I'm trying to make a layout consisting of (for now) 4 different content areas like so:
What I'm trying to do
I'm trying to do the following things:
Simple explanation: Content should be the only scrollable thing on the page, with the footer following right behind it if content fits on the page, fixed on the bottom otherwise.
Detailed explanation:
Fix banner and mainMenu so that they never move when page is scrolled.
Make the content scroll with a page so that:
If the content (and footer) fit on a page, no scroll is displayed.
If the scroll is needed, content goes behind the banner (not being shown) and does not appear again above it.
If the scroll is needed, content can scroll until the bottom line of it and the footer are in the visible area.
The footer should do two things:
If content and footer fit on the page, footer should stick at the bottom of the content
Otherwise, footer should be fixed on the bottom.
What I have tried
Fixing banner,mainMenu and the footer are fixed using position: fixed (and positioned accordingly). Parent div has overflow: hidden (which doesn't seem to work).
<div id='main'>
<div id='banner'>banner</div>
<div id='mainMenu'>mainMenu</div>
<div id='content'>.. some long content ..</div>
<div id='footer'>footer</div>
</div>
And
#main {
width: 960px;
height: auto;
margin: 40px auto;
overflow: hidden;
}
#main #banner {
width: 960px;
height: 100px;
position: fixed;
}
#main #mainMenu {
width: 230px;
height: auto;
display: inline;
float: left;
position: fixed;
top: 140px;
}
#main #content {
width: 720px;
height: auto;
display: inline;
float: right;
margin-top: 100px;
}
#main #footer {
width: 960px;
height: auto;
clear: both;
position: fixed;
bottom: 0;
}
The Problem
Footer does not follow content if it fits within the area
Content overflows on the top of banner
I would really prefer to do this just in CSS (if possible) and as compatible as possible (IE7+, all other major browsers).
It's really getting frustrating now.. Any help would be appreciated.
There is no conceivable way I can think of that would solve your problem by just using css. Once you have set your elements to a fixed position they are out of the flow and thus your other elements cannot conform around them.
However I did find a solution by doing two different things. For the header issue I simply added another fixed element above the main banner and set it to the color of the background. This way the content will scroll behind it and look as if it is hidden. For the footer, I set up some javascript using jQuery to see if the content overflows or not. If it does then the footer's position is set to fixed, otherwise the position is set to relative.
You can check it all out here in this demo: http://jsfiddle.net/mrQGh/4/
To test out the javascript simply delete the text until there is no more overflow and run it again.
On my website: http://www.thetechnodaily.com the footer on homepage is fine because of a lot of content. But on pages with small content such as about page its not at bottom of page. The footer is at the end of content rather than bottom of page. Is there any way I can make the footer always stay at bottom?
yea you can use sticky footer
<div id="footer"></div>
#footer
{
position: relative;
margin-top: -50px; /* Give the height of footer as negative margin */
height: 50px;
clear:both;
}
This link may help you
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you are referring to having a fixed footer which always shows at the bottom you will need to use fixed position bottom: 0px so it will always stay there even if the content does not fill up the screen
#footer_id {
position:fixed;
bottom:0px;
height: "whatever";
}
I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley
CSS
/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */
Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/
Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.
And read this link: http://www.cssstickyfooter.com/
You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate !
The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.