HTML adapter la page à l'écran des problèmes

Je développe une application pour mesurer et stocker des pistes de course/cyclisme en utilisant l'intégration OSM/Google Maps. Je veux que cela fonctionne sans défilement de la page, donc la page devrait remplir la fenêtre du navigateur. Fondamentalement, il devrait se présenter comme suit:HTML adapter la page à l'écran des problèmes

+---------------------------------+ 
|  Toolbar with some buttons | 
+---------+-----------------------+ 
| Long ^|      | 
| list ||      | 
| of  ||      | 
| routes v|  Filled   | 
+---------+   with   | 
| Route |  Google   | 
| statis- |   Map   | 
| tics |      | 
+---------------------------------+

La liste des routes est très longue et devrait être obligé de montrer une barre de défilement. La barre d'outils et les statistiques de routage doivent rétrécir à l'espace minimal requis. Mon fichier de test en cours HTML est la suivante:

<html> 
    <body style="width: 100%; height: 100%; border: 0; margin: 0"> 
     <div style="height: 100%; max-height: 100%; border: 4px solid gray"> 
      <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue"> 
       <tr style="height: 30px"> 
        <td colspan="2"> 
         <div style="border: 2px solid red">Toolbar</div> 
        </td> 
       </tr> 

       <tr> 
        <td style="width: 300px; border: 2px dashed orange; overflow: scroll"> 
         <!-- long list for testing --> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
        </td> 
        <td rowspan="2" style="border: 2px dashed yellow"> 
         map 
        </td> 
       </tr> 
       <tr> 
        <td style="border: 2px dashed brown"> 
         bottom left 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

Ouvrir que dans votre navigateur et vous verrez que la div externe remplit correctement (horizontalement et verticalement) la fenêtre, mais la table est à l'intérieur plus grand que le contenant div. Ce que je m'attendais à ce que la longue liste serait défilement à cause de overflow: scroll mais ce n'est pas le cas.

Des idées ou des tutoriels sur la façon de résoudre ce problème?

Source

2010-09-25 AndiDog

Qui downvoting sans laisser un commentaire? – AndiDog

Essayez de mettre un div dans la « liste des itinéraires » td et faire que la place de l'scrollable td lui-même. Passez à travers et assurez-vous que rien n'a un rembourrage ou une bordure. Voyez si la définition ou la suppression d'un doctype change quoi que ce soit (c'est l'un de ces cas où le mode quirks et les standards agissent de manière très différente).

Cela fonctionne pour moi en chrome 6: http://jsbin.com/oxaku4/2/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html style="width: 100%; height: 100%; border: 0; margin: 0"> 
    <body style="width: 100%; height: 100%; border: 0; margin: 0"> 
    <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue"> 

     <tr> 
     <td colspan="2"> 
      <div style="border: 2px solid red">Toolbar</div> 
     </td> 
     </tr> 

     <tr> 
     <td style="width: 300px; border: 2px dashed orange; height:100%;"> 
     <div style="overflow-y:scroll; height:100%;"> 
      <!-- long list for testing --> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     </div> 
     </td> 
     <td rowspan="2" style="border: 2px dashed yellow;"> 
      map 
     </td> 
     </tr> 

     <tr> 
     <td style="border: 2px dashed brown;"> 
      bottom left <br> 
      some stuff <br> 
      goes here <br> 
     </td> 
     </tr> 

    </table> 
    </body> 
</html>

Source

2010-09-25 19:16:58

Ok, cela empêche le TD de déborder sur le DIV externe. Mais la page ne correspond toujours pas aux fenêtres du navigateur - je ne veux pas que la page soit scrollable mais seulement la "liste des routes". Dans votre exemple de solution, la table n'obéit pas à 'height: 100%' mais croît plus haut de sorte que je dois faire défiler la page. – AndiDog

IE8 tient tout dans la fenêtre du navigateur, mais la case orange (liste des routes) affiche 7 pixels de haut. Ai-je dit que je déteste HTML? ... – AndiDog

Je pense que vous êtes au point où vous devez commencer à jouer avec doctypes. L'exemple a fonctionné pour moi en chrome 6, a probablement besoin de peaufiner pour fonctionner avec tous les navigateurs. Bienvenue dans le monde merveilleux du développement web; p –

-1

Je pense que si vous implémentez que la conception à la place DIVs de table, il travaillera

Source

2010-09-25 18:49:36

Pouvez-vous fournir un exemple simple, je ne comprends pas qu'il fonctionne correctement avec DIVs. Même problème - DIV interne (côté gauche) déborde de la DIV externe au lieu d'être scrollable. – AndiDog

HTML adapter la page à l'écran des problèmes

Répondre

Questions connexes