CSS: Невозможно установить высоту тела в% для прокрутки

Question

Я пытаюсь использовать CSS-решение для прокрутки содержимого таблицы при сохранении заголовка.

CSS Код 1:

<style type='text/css'> 
    * { 
    padding:0; 
    margin:0; 
    border:0; 
    } 
    #ListData { 
     display:block; 
     width:100%; 
     height:100%; 
     float:left; 
     background:#ffffff; 
    } 
    #ListData table { 
        width:100%; 
       } 
    #ListData thead { 
        position:relative; 
        width:100%; 
        height:20px; 
        overflow:auto; 
        background:#0099cc; 
       } 
    #ListData tbody { 
        position:relative; 
        width:100%; 
        height:300px; 
        overflow:auto; 
       }    
    </style> 

Выход для этого стиля здесь: http://riotdesign.in/test.php

Это отлично работает в Firefox (я не забочусь о IE на данный момент ..)

Однако, если я использую проценты вместо px или em:

<style type='text/css'> 
    * { 
    padding:0; 
    margin:0; 
    border:0; 
    } 
    #ListData { 
     display:block; 
     width:100%; 
     height:100%; 
     float:left; 
     background:#ffffff; 
    } 
    #ListData table { 
        width:100%; 
       } 
    #ListData thead { 
        position:relative; 
        width:100%; 
        height:10%; 
        overflow:auto; 
        background:#0099cc; 
       } 
    #ListData tbody { 
        position:relative; 
        width:100%; 
        height:50%; 
        overflow:auto; 
       }    
    </style> 

Это то, что я получаю: http://riotdesign.in/test2.php

Что я делаю неправильно? :)

Answer 1

В какой-то момент ваши объекты должны иметь родительский элемент уровня block с определенным размером, чтобы получить нужную прокрутку.

В частности, в вашем случае необходимо иметь определенную высоту либо содержащую DIV ListData, либо ListData table.

При добавлении процентных значений по высоте и ширине убедитесь, что вы знаете ответ на «x% того, что ...?» и следуйте этому вопросу вверх по цепочке, пока вы не нажмете что-то с жесткими границами. Если вы дойдете до элемента Body и до сих пор не имеете жесткой границы, вы не получите желаемого эффекта.

Я проверил обе эти в Firefox 3.5.xx и получил tbody прокручивать:

#ListData 
{ 
    display:block; 
    width:100%; 
    height:200px; 
    float:left; 
    background:#ffffff; 
} 

или

#ListData table { 
    width:100%; 
    height: 200px; 
} 

Это также работает:

body 
{ 
    width: 100%; 
    height:600px; 
}