CODEWITHSUNDEEP
htmlcss
David B
David B

Reputation: 3581

Filling remaining div-height

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.

Upvotes: 1

Views: 41

Answers (4)

Adam Gunning
Adam Gunning

Reputation: 96

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

Regards

Adam

Upvotes: 0

pethel
pethel

Reputation: 5537

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%;
}

Upvotes: 0

Arko Elsenaar
Arko Elsenaar

Reputation: 1739

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

Upvotes: 1

SW4
SW4

Reputation: 71230

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

Upvotes: 1

Related Questions