How to get css div to stretch to 100% of window

Question

I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.

<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    height:100%;
}
body {
    background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
    width: 965px;
    height: 100%;
    margin: 0 auto; 
    overflow: hidden;
}
.sidebar1 {
    float: left;
    width: 200px;
    background: none;
    padding-bottom: 10px;
} .content {
    padding: 10px 0;
    width: 380px;
    height: 100%;
    background: #fff;
    float: left;
    position: relative;
} .content2 {
    float: left;
    width: 380px;
    height: 100%;
    background: #fff;
    padding: 10px 0;
}
-->
</style>

Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):

<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>

Petah · Accepted Answer · 2011-02-02T10:35:20.400

19

You need 100% height on the html tag as well

html { height: 100%; }

See: http://jsfiddle.net/wJ73v/

edited Feb 02 '11 at 10:35

answered Feb 02 '11 at 04:12

Petah

44,167
27
153
209

@jeansymolanza, see the jsfiddle I added for a demo. – Petah Feb 02 '11 at 10:35

score 3 · Answer 2 · answered Feb 02 '11 at 07:26

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <style>
            html {height: 100%;}
            body {height: 100%; margin: 0; padding: 0;}
            div {border: 1px solid #000; height: 100%; float: left;}
        </style>
    </head>
    <body>
        <div id="foo">a</div>
        <div id="bar">b</div>
    </body>
</html>

Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.

How to get css div to stretch to 100% of window

2 Answers2