I have read all of the examples of this already and they are not complete and or do not work. What I need is a footer that will be at the bottom of the page always. However if there is no content to fill the area in the middle the footer still needs to be at the bottom of the page rather then in the middle. I tried this Method and this Method Neither of which work. The first does not seem to work at all, and the second forces it to the bottom of the page, if there is content or not, but if there is content, I.E you would have to scroll normally the footer is in the middle of the page as you scroll down. Any help would be great.
Asked
Active
Viewed 3,535 times
2
-
4Post some code please – GillesC Jun 12 '14 at 17:44
-
1By `bottom of the page` do you mean that it should be at the bottom when you scroll down or always down on the bottom in a fixed position? – Spencer Wieczorek Jun 12 '14 at 17:57
-
bottom of the page when you scroll down, unless there is no scrolling to be done then it should be fixed at the botom of the page – CMOS Jun 12 '14 at 19:00
1 Answers
6
As you have not posted code (HTML or CSS) I am just guessing :
#wrapper{
min-height:100%;
position:relative;
}
footer {
position: absolute;
bottom:0;
left:0;
width:100%;
background:red;
height:100px;
}
Demonstration: footer with content
Demonstration: footer without content
potashin
- 44,205
- 11
- 83
- 107
-
Your example is halfway what I am looking for, if you go to your jsfiddle and put enough content above the footer to make it have a scrollbar the footer follows along stuck on the bottom. I need a footer to be at the bottom of all content, unless there is no content then put it at the bottom as you showed – CMOS Jun 12 '14 at 19:02
-
1
-
1