0

Al insertar un mapa leaflet, he probado darl estilos para ajustar a la vertical de la ventana. Si no le aplico un min-height se reduce a nada, no se ve el mapa. ¿Cómo se debería dar el estilo correcto para que tome el vertical completo de la ventana del navegador?

Actulmente de ve así: introducir la descripción de la imagen aquí

Estilos CSS:

<style>
html, body {
  width: 100%;
}
#map {
  width: 100%;
  min-height:850px;
  margin:0px;
  padding:0px;
}
</style>

1 respuesta 1

2

Podes usar la unidad vh (Viewport Height) que es básicamente relativa al alto de la pantalla donde se este mirando. Podes ponerle al elemento contenedor del mapa height: 100vh; y va a tener la misma altura que la pantalla.

PD: seguramente vas a tener que restar los margenes fijos con calc() para que no salga un scroll con algo como height: calc(100vh - navBarHeight); donde navBarHeight es la altura de tu navBar.

En tu caso algo asi:

#map {
    width: 100%;
    height: calc(100vh - 60px);
    margin:0px;
    padding:0px;
}
1
  • Es perfecto, muchas gracias.
    – ret
    Commented el 25 mar. 2021 a las 22:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.