ansaurus

Question

how to size a div's height to its container height, using CSS ?

Answer 1

A:

Could you not set the height of the contained element to be height:100%;

AJM 2009-12-10 13:43:43

No, since the container has `height: auto` so `height: 100%` would fallback to `auto`.

David Dorward 2009-12-10 13:49:08

I take it height:auto is the default for a container which has no explicit height set?

AJM 2009-12-10 14:21:42

Yes (is is the default and stackoverflow doesn't like three character comments)

David Dorward 2009-12-10 15:59:02

Ok thanks (or 9 character ones)

AJM 2009-12-10 16:05:34

Answer 2

+2 A:

If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.

AJM 2009-12-10 14:33:28

Answer 3

+1 A:

It seems like you are trying to get equal height columns. You could use the fauxcolumns method where a background image is used to fake the equal height. There are other methods out there.

Tom 2009-12-10 14:47:39

Answer 4

+1 A:

It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones. If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piece contains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.

The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).

Jeremy DeGroot 2009-12-10 14:50:14

http://www.alistapart.com/articles/fauxcolumns/ <= Original article describing the Faux Columns technique you link to - which is what the top post really asks for ;)

Arve Systad 2009-12-18 22:24:29

Answer 5

A:

Sample code, you need to start from the html element so you can make use of the flexible height in the containers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>100% Test</title>
 <style type="text/css">

   html, body, #inner { height: 100% }
   #inner { border: 4px blue solid } 
   #container { height: 200px; border: 4px red solid }

 </style>
</head>
<body>

    <div id="container">
     <div id="inner">
      lorem ipsum
     </div>
    </div>

</body>
</html>

F.Aquino 2009-12-10 15:51:08

Answer 6

+1 A:

You can tell the container div to display as table and have the inner div to display as a table cell.

The HTML

<body>
<div id="wrap">
    <div id="header">
        <h1>
            My Header</h1>
    </div>
    <div id="main">
        <ul id="nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <div id="primaryContent">

        </div>
    </div>
    <div id="footer">
        <h1>
            My Footer</h1>
    </div>
</div>

The CSS

#wrap
{
    width: 800px;
    margin: auto;
}

#header
{
    background: red;
}

#main
{
    display: table;
}

#nav
{
    background: gray;
    width: 150px;
    display: table-cell;
}

#primaryContent
{
    background: yellow;
    padding: 0 .5em;
    display: table-cell;
}

Fixes for IE

    #wrap 
{
    width: 800px;
    margin: auto;
}

#header, #footer
{
    background: red;
}

#main 
{
    background: url(../bg.png) repeat-y;
}

#nav 
{
    background: gray;
    width: 150px;
    float: left;
}

#primaryContent 
{
    background: yellow;
    margin-left: 150px;
    padding: 0 .5em;
}

Chad 2009-12-10 17:46:35

Answer 7

+2 A:

There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.

$(divToResize).css('height',$(container).innerHeight());

$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.

This will work regardless of if the container's height is specified in CSS or not.

KyokoHunter 2009-12-18 21:30:22

Answer 8

A:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title></title>
<style type="text/css">
.container{
    position:relative;
    background-color:#999;
}
#to-be-sized{
    position:absolute;
    top:0;
    height:100%;
    background-color:#ddd;
}
</style>
<body>

<div class='container'>
    <br>
    &nbsp;&nbsp;
    <div style='display: block; height: 500px'>left</div>
    <br>
    &nbsp;&nbsp;
    <div id='to-be-sized' >right</div><br>
</div>

</body>
</html>

Rob 2009-12-18 21:54:22

Answer 9

A:

You can either:

use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers

or

write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere

Your pick :)

kemp 2009-12-18 22:10:25

ansaurus

tags:

views:

answers:

how to size a div's height to its container height, using CSS ?

related questions