CSS height 100% issue

Question

I know there are a lot of questions about a css 100% height problem. However I\'ve tried to follow the instructions there and still the height isn\'t 100%, so I thought I\'d

Answer 1

@denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.

css:

.wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

check this example http://jsfiddle.net/sandeep/tCdPX/3/

this functionally called stickyfooter

Answer 2

A number of people suggested position:absolute; bottom:0;

This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.

If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.

If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca

Answer 3

I think this article can help you.

According to this article:

Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.

I hope that helps you.