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?
Qui downvoting sans laisser un commentaire? – AndiDog