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;
}