Table HTML avec 2 lignes. 1 hauteur fixe, 1 100%. Plus grand que la fenêtre. Pourquoi?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 


    <style type="text/css"> 


    html, body, form, table, tbody, tr { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     border-style: none; 
    } 

    tr#MainTitle 
    { 
     height: 70px; 
    } 

    div#test { 
     height: 100%; 
     background-color: blue; 
    } 

    /* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */ 

    td.MainMenu { 
     background-color: red; 
     height: 100%; 
    } 
</style> 
</head> 
<body> 
<form name="form1" method="post" action="#" id="form1"> 
    <table id="Main"> 
    <tbody> 

     <tr id="MainTitle"> 
      <td>Title</td> 
     </tr>  

     <tr id="MainMenuRow"> 
      <td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>  
     </tr> 
    </tbody> 
    </table> 
</form> 
</body> 
</html>

(edit) J'ai essayé de simplifier le problème. J'ai une table. Je souhaite que la ligne de titre supérieure soit fixée en taille et que la ligne de contenu suivante remplisse l'écran restant.Table HTML avec 2 lignes. 1 hauteur fixe, 1 100%. Plus grand que la fenêtre. Pourquoi?

Comme je l'ai mis en place si la cellule de contenu est hauteur: 100% Alors la page est plus grande que la fenêtre (par la taille de la ligne titre) mais si je passe en auto la cellule est la bonne taille la fenêtre mais la div contenue ne remplit pas la cellule.

Que se passe-t-il?

Source

2010-03-03 haymansfield

Qu'essayez-vous exactement d'accomplir avec une telle disposition? Parce qu'il peut y avoir une meilleure solution que d'utiliser des tables. Mais vous devriez dire exactement ce que vous voulez faire. – easwee

Ok donc je n'ai pas été tout à fait clair dans ma description mais j'ai plus de compréhension de ce qui se passe maintenant. Tout d'abord, il s'agit d'une simplification d'une mise en page héritée, donc je n'ai aucun contrôle sur la forme de la table, la div de test est où mon contenu va. Comme vous le dites, Im utilisant 70 px + 100% qui est pourquoi c'est trop grand mais j'ai besoin d'avoir du contenu dans la cellule du bas et Si je retire 100% de la cellule alors la hauteur de 100% sur la div se dégrade en auto, comme selon les normes css. On dirait une situation de Catch-22. Je travaille en mode normes ie8. – haymansfield

Vérifiez à nouveau ma réponse - je pense que c'est exactement ce dont vous aviez besoin. Quoi qu'il en soit - la prochaine fois que je vous suggère d'utiliser firefox + firebug - rendra les choses beaucoup plus simples à déboguer. – easwee

Le problème est dû aux marges par défaut de l'élément BODY dans votre code. Vous spécifiez que le BODY doit occuper 100% de l'espace disponible, mais par défaut, le tag BODY ajoutera une marge à ceci, provoquant que vos éléments occupent un peu plus de 100% de l'espace d'écran disponible.

Vous pouvez résoudre ce problème en ajoutant ce qui suit à votre style BODY:

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

Source

2010-03-03 14:23:11

Malheureusement, ce n'est pas le problème. La zone de défilement est beaucoup plus grande et semble être la taille de la rangée de titre en haut. – haymansfield

Quel navigateur utilisez-vous? Dans Firefox, cela résout le problème. IE a des manières étranges de traiter des modèles de boîte, ainsi vous pouvez voir le comportement différent si vous employez cela. –

C'est simple ce qui se passe: #MainTitle + td.MainMenu = 100% + 70px de hauteur qui s'ajoutent au bas. – easwee

tr n'accepte pas l'attribut de hauteur. Vous devez définir cela sur l'élément td ou th. Ce code devrait faire le travail.

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <style type="text/css"> 
    html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;} 
    tr th {height:70px;} 
    tr td {background-color: blue;position:relative;vertical-align:top;} 
    .text {position:relative;height:100%;width:100%;background:yellow;} 
</style> 
</head> 
<body> 
<form name="form1" method="post" action="#" id="form1"> 
    <table id="Main" cellpadding="0" cellspacing="0"> 
     <tr> 
      <th>Title</th> 
     </tr>  
     <tr> 
      <td><div class="text">Test</div></td>  
     </tr> 
    </table> 
</form> 
</body> 
</html>

Source

2010-03-03 15:43:42 easwee

Cela donne la disposition de table correcte, mais la div contenant où vous avez 'Test' ne serait pas en mesure de remplir la cellule car sa hauteur se dégraderait automatiquement car son élément parent n'a pas de hauteur assignée. – haymansfield

J'ai édité la réponse - je pensais que vous n'avez pas besoin de la div intérieure. Vérifiez-le maintenant - le div intérieur correspond bien. – easwee

Malheureusement cela ne fonctionne qu'en mode Quirks. Si vous ajoutez le doctype pour passer aux standards, cela ne fonctionne plus. – haymansfield

Table HTML avec 2 lignes. 1 hauteur fixe, 1 100%. Plus grand que la fenêtre. Pourquoi?

Répondre

Questions connexes