CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CMOS
CMOS

Reputation: 2907

Force footer to the bottom of the page if no content is available

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.

Upvotes: 2

Views: 3615

Answers (1)

potashin
potashin

Reputation: 44581

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

Upvotes: 6

Related Questions