CSS: Impossible de définir la hauteur du corps en% pour le défilement

Question

J'essaie la solution CSS pour faire défiler le contenu de la table tout en conservant l'en-tête corrigé.

CSS Code 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> 

La sortie de ce style est ici: http://riotdesign.in/test.php

Cela fonctionne bien dans Firefox (je ne se soucient IE au moment ..)

Cependant, si j'utilise des pourcentages au lieu de px ou 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> 

Voici ce que je reçois: http://riotdesign.in/test2.php

Qu'est-ce que je fais mal? :)

Answer 1

À un certain point, vos objets doivent avoir un élément parent de niveau block avec une taille définitive afin d'obtenir le défilement souhaité. Spécifiquement dans votre cas, soit le DIV contenant ListData ou le ListData table doivent avoir une hauteur spécifique.

Lorsque vous ajoutez des valeurs de pourcentage pour la hauteur et la largeur, assurez-vous de connaître la réponse à «x% de quoi ...? et suivez cette question jusqu'à la chaîne jusqu'à ce que vous frappiez quelque chose avec des limites strictes. Si vous atteignez l'élément Body et que vous n'avez toujours pas de limite fixe, vous n'obtiendrez pas l'effet souhaité.

J'ai testé deux dans Firefox 3.5.xx et a obtenu le tbody pour faire défiler:

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

ou

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

Cela fonctionne aussi:

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