I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
+1
A:
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
cletus
2010-02-08 04:33:16
I need to do this without overlaying. `parent` needs to be 100% height of `body`, `top` needs to be 2em tall, and `bottom` needs to fill the rest of parent. Is this possible?
Chetan
2010-02-08 04:40:34
Does `height: 100%` *work* in any context?
donut
2010-02-08 04:51:22
It does if you set `body`'s height to 100%.
Chetan
2010-02-08 05:02:41
@Chetan: CSS has no way of saying "height 100% minus 2em" (barring expressions). Your best approach of doing this if you can't or don't want to do an overlay is to use tables, which will do this flawlessly. Table height 100%, first row height 2em, second row will take up the rest of the space.
cletus
2010-02-08 05:49:04
A:
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?
mark123
2010-02-08 04:57:20