CODEWITHSUNDEEP
htmlcssfootersticky-footer
Lir An
Lir An

Reputation: 123

footer not stick to bottom of the page

i can't find the reason why the "footer" don't stick to the end of the page,and the body is not really 100% height.

I have the code in this link:

https://dl.dropbox.com/u/107452929/flow/CWSMainTitle.htm

Upvotes: 0

Views: 5044

Answers (4)

Sowmya
Sowmya

Reputation: 26969

Add position:fixed

footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}

If you want footer to stick to the bottom of the page then you need to add a div to wrap the entire code and give position:relative to wrapper div and retain your footer css as it is.

In this case footer has parent div to apply the absolute position but in your current code you don't have parent div to place the absolute position.

HTML 

<div class="wrapper">
your full html code here
</div>

CSS

.wrapper{
position:relative;
height:auto;
}

LIVE DEMO

If you are not particular about position:absolute then you can just change that to position:relative and place the footer html tag to the end of the page. In this case you need not to add the wrapper div.

DEMO 2

Upvotes: 2

immayankmodi
immayankmodi

Reputation: 8580

Try this:

.footer {position:absolute;bottom:0;left:0;}

Upvotes: 0

Michael Antonius
Michael Antonius

Reputation: 972

Try to use min-height:100% to the body. And give display:inline-block to the wrapper of your content

Upvotes: 0

theredled
theredled

Reputation: 1040

If you want to put your footer at the end of the entire page, then you have nothing to do, no absolute, no fixed : just a block after all the others.

Upvotes: 0

Related Questions