Filling remaining div-height

Question

I have a simple for some but I can't solve the problem for some time now.

I have the problem pasted here on JSFiddle.

I wanted to make div[id='content'] to fill-in the remaining height. I've followed some tutorials on CSS about display: table and display:table-row yet, I can't have it work on mine.

Thanks in advance you would help me big-time.

Answer 1

You need to add:

html{
    height:100%;
}

Demo Fiddle

This gives your viewport a size from which the 100% assigned to the body can be calculated, otherwise it is effectively 100% of nothing . You may also want to add a % to the height value for body

Answer 2

Add this:

html, body, html > body, html body {
    height:100%;
    min-height:100%;
}

The many expressions are for all browsers, IE etc is kinda buggy with only html { height: 100%; }

fiddle

Answer 3

Try this css using position fixed

body {

    margin: 0px;
    width: 100%;
    height: 100%;
    background: red;
}
#nav {

    height: 25px;
    background: blue;
}
#content {

    height: 100%;
    background: green;
    position: fixed;
    bottom: 0px;
    top: 25px;
    width: 100%;
}

Answer 4

Use the CSS min-height property.. I normally set this using java scripts screen.height - header height - footer height..

Regards

Adam