28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment ils font dans Google Maps pour la taille de la fenêtr

Bonjour à tous,

La question est mal posée dans le titre (pas assez de place !) mais comment faire pour afficher une carte dans tout l'espace de la fenêtre ?

J'utilise Leaflet pour afficher une carte, que je créé dans un bloc DIV, et même en mettant...
		html, body {		
			height: 100%;
<!-- nécessaire avant le #mapid {height: 100%;} (sinon il ne sait pas 90% de quoi...) -->
(ce qui prouve que j'ai déjà bien cherché dans Alsacréations avant de poster la question !!!)
		}

		#mapid {
			width: 100%;
			height: 90%;
		}
...le résultat est une page avec un bloc à l'intérieur. Aussi large et haut qu'il fût, il ne va pas jusqu'au bout de la fenêtre. Moi je voudrais que la totalité de la surface de mon firefox soit dédié à la carte.

Évidemment, j'ai regardé le code source de Google Maps, et idem avec la carte d'OpenStreetMap, et évidemment je n'ai rien compris au code source...

Pouvez-vous m'éclairer sur le sujet ?

Merci d'avance !
Modifié par GeoTrouvetout (17 May 2017 - 16:03)
Salut,

Je n’ai pas bien compris, ton container à une height de 90%, dans ce cas cela semble logique qu'il ne prenne pas tout l'espace ?

Sinon :
- As-tu utilisé un reset CSS ? Généralement il y a du margin sur le body ce qui peut empêcher le div de prendre toute la hauteur.
- Tu peux utiliser l'unité vh, tu mets 100vh et hop le tour est joué ! 
- Tu peux le positionner en absolute, avec un left 0; right: 0; top: 0; bottom: 0;
Ouiiii ! C'était juste la propriété margin (j'ignorais qu'elle fût* définie par défaut à autre chose que zéro).

NB : j'avais mis le height à 90% pour une autre raison, mais même avec 100% cela ne marchait pas, et pour cause.

Bref, tout simple, mais je butais là-dessus depuis un moment... merci beaucoup !

Géo.

* Deuxième subjonctif imparfait en moins d'une heure... je m'améliore !
Modifié par GeoTrouvetout (17 May 2017 - 17:19)
Sujet clos
Aller à