Set position:absolute
to position:fixed
for footer
EDIT:
Apply a CSS Reset *{padding:0;margin:0;}
then change the position
of the footer
to relative
and remove the top
from the container.
Demo:
Domanda
for some reason I can't get my footer to stick to the bottom of the page
EDIT: I am trying to keep it at the bottom of the page, not the bottom of the window
and the even though I have set it to width:100% it seems to be 100% of the width of the previous div rather than 100% of the page.
Here is the jsFiddle of the entire page : http://jsfiddle.net/eehSa/1/
The css code I am using for the footer is:
#footer {height:50px; width:100%; background-color:red; position:absolute; bottom:0px;}
Soluzione 2
Set position:absolute
to position:fixed
for footer
EDIT:
Apply a CSS Reset *{padding:0;margin:0;}
then change the position
of the footer
to relative
and remove the top
from the container.
Demo:
Altri suggerimenti
You need to set the left value left: 0;
and a fixed position position:fixed;
#footer #footer {height:50px; width:100%; background-color:red; position:fixed; bottom:0px;left: 0;}
#container {height:100%;
position: relative;
width: 90%;
margin: 0 0 20% 5%;/* add some magrin-bottom*/
background-color: white;
top: 80px;
}
on the body :
body {background-color:lightgray; padding:0;margin:0;}/* add padding and margin*/
position relatve
#footer {height:50px; width:100%; background-color:red; position:relative; bottom:0px;left: 0;clear:both;}
There's some steps you need to do for that, Try this : http://jsfiddle.net/eehSa/4/
html,body{ /** Add new style to html,body */
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-color:lightgray;
position: relative; /** New */
height: auto; /** New */
min-height: 100%; /** New */
padding-bottom: 75px; /** New, equal to footer height + x */
}
#footer {
height:50px;
width:100%;
background-color:red;
position:absolute;
bottom:0px;
left: 0; /** New */
}