tags:

views:

362

answers:

1

I have a div with 2 elements.

<div id="master">
      <div id="follower"></div>
      <div id="decider"></div>
<div>

'master' div has the following CSS properties

height:auto;
width:auto;
margin:0;
padding:10px;   
display:block; 

The 'follower' div has the following CSS properties

position:relative;

vertical-align:middle;
height: auto;

display: inline-block;

margin-top: 0px;
margin-bottom:0px;

The 'decider' div decides how tall the 'master' div is. Is it possible for the 'follower' div to fill up as much vertical space in the 'master' div as possible?

I tried height: 100% but that just made the 'follower' div take up the whole screen (vertically)

+2  A: 

The master should have

position: relative;

and then the follower should have

position: absolute;
top: 0;
bottom: 0;

That should work, except in IE6 (which an alarming amount of people are still using, but I would just disregard those and tell them to update their browser)

Pete
Yep that works. However, it (apparently) caused the inline-block setting in 'follower' to be ignored.
jameszhao00
@jameszhao00, that's because a `position: absolute` element is taken out of the document-flow, so there's nothing it can be inline *with*.
David Thomas