Discussion :

[SylvainM]

Bonjour à tous,

Je travaille sur des cartes interactives basées sur leaflet, et j'utilise Bootstrap pour le style de mon site.
J'aimerais que la DIV de la carte utilise 100% de la hauteur du navigateur, moins la barre de navigation (navbar).

Pourriez-vous m'aider à trouver la méthode la plus propre pour faire cela ?

Voici un JSFiddle pour avoir une idée de ce que ça pourrait donner :
https://jsfiddle.net/Sylvain_M/r7Lm6dc3/



Merci d'avance pour vos conseils

[SylvainM]

En m'inspirant de cette discussion, et de ce modèle, j'ai réussi à avoir quelque chose avec une classes principale "container-fluid min-100 d-flex flex-column" et une classe "row flex-grow-1 bg-info" pour la map.

Ceci en ajoutant ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html, body {
  height: 100%;
}
 
.min-100 {
    min-height: 100%;
}

Je ne comprends pas encore le principe, mais j'ai déjà de quoi me documenter.
Voila ce que ça donne :
https://jsfiddle.net/Sylvain_M/jen8r9ha/

Par contre, j'ai l'impression que le bas de la carte, qui affiche normalement les attributions Leaflet, n'est pas bien visible (mais c'est peut-être lié à l'affichage via JsFiddle)

Si vous voyez plus propre, n'hésitez pas à me conseiller.

[SylvainM]

j'ai l'impression que le bas de la carte, qui affiche normalement les attributions Leaflet, n'est pas bien visible (mais c'est peut-être lié à l'affichage via JsFiddle)

Pour ce point, c'est bien l'affichage dans JSFiddle qui posait souci : en conditions réelles, la DIV map est bien calée sur le bas du navigateur.

Par contre, je n'avais pas remarqué, mais c'est le bord droit de la page qui me pose souci maintenant : il y a une marge "perdue" de quelques pixels.
Je ne vois vraiment pas quelle propriété CSS est en cause.

J'ai essayé en mettant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
		.container-fluid {
			padding-right:0;
			padding-left:0;
			margin-right:auto;
			margin-left:auto;
		 }

Mais ça ne résout pas complètement (il reste une petite marge à droite), et au contraire, ça "mange" un peu sur la gauche maintenant : https://jsfiddle.net/Sylvain_M/jen8r9ha/3/

Est-ce que vous voyez comment gérer cela ?

[NoSmoking]

Bonjour,
tu es victime de la class row de BootStrap, marges latérales négatives, essaies avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.row {
  margin: 0;
}

[SylvainM]

C'est impeccable !
Merci beaucoup NoSmoking !