Question

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)

Answer 1

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)