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

回答1:

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

回答2:

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.

回答3:

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

回答4:

Try this:

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

来源：https://stackoverflow.com/questions/13137117/footer-not-stick-to-bottom-of-the-page