css - Why does my absolutely positioned table not fill its container div? -

i have table inside div, , table won't fill container div. why not?

html:

<div class="fill">   <table class="table">     ...   </table> </div> 

css:

.fill {   position:relative;   width:100%;   height:100%; }  .table {   position:absolute !important;   left:0 !important;   right:10px !important;   bottom:0 !important;   top:39px !important;  } 

the table fills small portion of container div. why?

update: or, if try following, doesn't work in firefox, in chrome.

html:

<div class="fill">   <div class="wrap">     <table class="table">       ...     </table>   </div> </div> 

css:

.fill {   position:relative;   width:100%;   height:100%; }  .wrap {   position:absolute;   left:0;   right:0;   top:39px;   bottom:0; }  .table {   position:relative;   height:100%;   width:100%; } 

this second version closer want (since work in chrome).

in regards original question, answer 'why not':

if height of containing block not specified explicitly (i.e., depends on content height), , element not absolutely positioned, value computes 'auto'.

source: http://www.w3.org/tr/css2/visudet.html#the-height-property

your 'fill' div set 100% height, parent element's height set to? , if parent element's height percentage, parent's height set to, , on?

add borders updated example , see, height of 'fill' 0 has no parent specified height, , height of 'wrap' zero. add parent wrapper wrap whole example height of 500px or , works expected in (at least) firefox , chrome.

css:

.fill {   position:relative;   width:100%;   height:100%;     border: 1px solid red; }  .wrap {   position:absolute;   left:0;   right:0;   top:39px;   bottom:0;     border: 1px solid blue; }  .table {   position:relative;   height:100%;     border: 1px solid green; } .parent {     height: 300px; } 

html:

<div class="parent"> <div class="fill">   <div class="wrap">     <table class="table">         <tr><td>...</td></tr>     </table>   </div> </div> </div>