Middle div with 100% in CSS?

Question

Possible Duplicate:
CSS - percentage height

I can't get the middle div of 3 divs to fit 100% of available space.

<body>
<div id="container">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</div>
</body>

My CSS is:

html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
    background: #F60;
}
#footer {
    height: 75px;
    width: 100%;
    background: #060;
}

Center div is in effect being 100%, but its not fitting available space.

It is doing something like this: If the screen is 500px

30px
100% (500px)
30px

What I need is:

30px
100% (460px)
30px

Is this possible withouth using javascript?

Thanks a lot

EDIT:
Sorry I meant Height I have 3 elements, header, middle and footer. Header and footer have fixed height, but I want middle to fit all available space

Found another solution based on other stackoverflow question:

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    border: 0;
}
#header
{
    height: 100px;
    background:#C60;
}

#container
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    background:#096;
}

#footer
{
    height: 100px; /*Push must be same height as Footer */
    background:#C60;
}

HTML

<body>
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
</div>
<div id="footer"> </div>
</body>

I do not understand what you're asking. 100% means 100% of the width of the parent element -- so if you're in a 500px wide space, 100% is all 500px. Or do you mean you want it to grow vertically? — Roddy of the Frozen Peas, Jun 29 '12 at 15:15
http://stackoverflow.com/questions/5657964/css-percentage-height — Matthew Lehner, Jun 29 '12 at 15:15
Sorry I meant Height I have 3 elements, header, middle and footer. Header and footer have fixed height, but I want middle to fit all available space — JorgeeFG, Jun 29 '12 at 15:21

score 3 · Accepted Answer · edited Jan 15 '18 at 04:29

3

Try something like this jsfiddle.

html

<body>
    <div id="wrap">
<div id="container">
    <div id="header">header
    </div>
    <div id="content">qweW
    </div>
</div>
</div>
    <div id="footer">footer
    </div>
</body>

css

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    background: #F60;
}
#container {
    width: 100%;
    padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
}
#footer {
    position: relative;
    margin-top: -75px;
    clear:both;
    height: 75px;
    width: 100%;
    background: green;
}

I tweaked your HTML to add a "wrapper" around the "container" div, and move the "footer" out of both.

edited Jan 15 '18 at 04:29

Paul Rooney

20,879
9
40
61

answered Jun 29 '12 at 15:21

Roddy of the Frozen Peas

14,380
9
49
99

Thanks that worked like a charm, I will study it to see what's going on. – JorgeeFG Jun 29 '12 at 15:26
@Jorge essentially it's an adaptation of a "sticky" header. If your footer is 100px tall, you give it relative positioning and -100px margin, and then give the wrapper of the above content a padding-bottom of 100px. – Roddy of the Frozen Peas Jun 29 '12 at 15:39
This is a slick way of accomplishing this. Nice one! – Phil Jun 29 '12 at 15:41
I found another solution based on this: http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div – JorgeeFG Jun 29 '12 at 15:48

DZittersteyn · Answer 2 · 2012-06-29T15:22:59.720

1

You could position the div absolutely:

<body>    
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</body>

and

#header {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height: 100px;
    background: #069;
}
#content {
    position:absolute;
    top: 100px;
    bottom: 75px;
    left:0px;
    right:0px;
    background: #F60;
}
#footer {
    position:absolute;
    bottom: 0px;
    height: 75px;
    left:0px;
    right:0px;
    width: 100%;
    background: #060;
}

edited Jun 29 '12 at 15:22

answered Jun 29 '12 at 15:15

DZittersteyn

628
3
8

Thanks, it didn't work, still the same behaviour. – JorgeeFG Jun 29 '12 at 15:19
Oops, wrong version. Updated the answer. – DZittersteyn Jun 29 '12 at 15:21

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

I think that a good idea would be to fiddle with 'display:flexbox' to achieve that kind of responsiveness. Here is a good article about it.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 29 '12 at 15:32

DamianS1987

302
1
3
13

Oh this is seriously cool. +1. Pity it's only for CSS3 and not backwards compatible without hacks. – Roddy of the Frozen Peas Jun 29 '12 at 15:51

Middle div with 100% in CSS?

3 Answers3

Linked