Right, I gave you the link but if you are having trouble take a look at this. Using your code and the link I gave you we can create this.
HTML:
<div class="page-wrap">
<div id="fillspace"></div>
</div>
<div id="foot"></div>
CSS:
/* Your code */
#foot {
left:0px;
right:0px;
color:white;
height:50px;
background-color:#444444;
width:100%;
margin-bottom:0px;
bottom:0px;
margin-right:0px;
z-index:103;
}
#foot a {
height:50px;
width:75px;
float:left;
color:white;
text-align:center;
text-decoration:none;
line-height:25px;
}
#foot p {
position:absolute;
width:150px;
height:50px;
right:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
bottom:0px;
top:0px;
}
/* New Code */
html, body {
height: 100%;
margin: 0;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content:"";
display: block;
}
#foot, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
#fillspace {
width: 100%;
height: 1000px;
background: #ddd;
}
So put your code with the code in the link I gave you. Then we take away your position: fixed
and set the correct heights of the footer to #foot, .page-wrap:after
and .page-wrap
. That's about it, all done. Take a look at the demo and play around with it.
With content:
Without content: