2008-09-18 18 views
11

J'utilise une table pour concevoir la mise en page de ma page Web. Je veux que la table remplisse la page même si elle ne contient pas beaucoup de contenu. Voici le CSS J'utilise:Comment étirer un tableau HTML à 100% de la hauteur de la fenêtre du navigateur?

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    min-height: 100%; 
    width: 100%; 
} 

Et je place quelque chose comme cela dans le code de la page:

<table id="container"> 
<tr> 
<td> 
... 

Cela fonctionne pour Opera 9, mais pas pour Firefox 2 ou Internet Explorer 7. Est existe-t-il un moyen simple de faire fonctionner cette solution pour tous les navigateurs populaires?

(Ajout id="container"-td ne vous aide pas.)

Répondre

8

Il suffit d'utiliser la propriété height au lieu de la propriété min-height lors de la mise #container. Une fois que les données deviennent trop grandes, la table se développera automatiquement.

18

Essayez d'utiliser ceci:

html, body { 
    height: 100%; 
} 

Ainsi, en plus de faire à 100% de la hauteur de la table, vous devriez également devez vous assurer que le html'd et la taille du corps sont également 100%, est bien étirer .

Questions connexes