11

He estado tratando de cambiar la altura de mi mapa de folleto a un porcentaje dentro de bootstrap, pero cada vez que hago el mapa no se dibuja. Por lo tanto, siempre tengo que volver al valor px. Estoy bastante seguro de que es una configuración simple que me falta, ya que soy un novato en CSS. Aquí está mi css.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>

web-mapping leaflet bootstrap-framework njackson.gis
fuente

3

proporcione más información: ¿cómo se ve su marcado? ¿Puedes producir un ejemplo mínimo que muestre el problema?

atlefren

12

Siempre he tenido problemas con la altura del mapa en bootstrap ya que el margen en la parte superior puede ser diferente cuando el ancho del mapa cambia para obtener una altura del 100% (pero con una barra de navegación en la parte superior) Termino usando

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

lo cual es feo pero hace el trabajo.

Calvin
fuente

6

[ACTUALIZACIÓN 2020]

A partir del 23/02/2020, Flexbox tiene un 95% de compatibilidad con el navegador y es una excelente opción para hacer que Leaflet responda utilizando la propiedad flex-grow.

Vea una demostración de CodePen aquí

Está configurado para que todavía se muestre en navegadores que no admiten Flexbox, solo aquellos usuarios tendrán que desplazarse un poco

¯ \ _ (ツ) _ / ¯

================================================== ==========

[ANTIGUA PUBLICACIÓN]

Esto funcionó para mí.

Nota: quería que mi mapa no tuviera un ancho del 100% en pantallas grandes, así que agregué

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}

Tristán Delantero
fuente

1

trabajó para mi. En realidad, la mejor respuesta

g07kore

5

El problema es #mapsecundario bodyy solo puede especificar alturas porcentuales para elementos secundarios si su principal tiene una altura definida explícitamente.

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

Esto crearía lo que desea, pero el área utilizable nunca crecería más que el 75% de 480px. Normalmente, un divcolapso cuando no hay un contenido, pero con Leaflet, aunque su mapa está en el divno se calcula en el render, por lo tanto, se contrae en el render. Si desea que el contenido ocupe todo el espacio vertical, puede consultar el tamaño de la ventana al cargar la página con algunos JavaScript y establecer la altura de esa manera.

RomaH
fuente

3

Simplemente agregue una height:100%a las etiquetas htmly bodypara que tengan una altura definida y puedan usarse como referencia y debería funcionar.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

Referencias

Esta pregunta relacionada de Stackoverflow: Porcentaje Altura HTML 5 / CSS
También puede echar un vistazo al estándar W3C CSS 2.1 para ver el modelo de caja y la parte sobre la computación de alturas y márgenes

pconcepcion
fuente

1

Este es el camino a seguir.

George Silva

1

¡Advertencia! Después de las pruebas entre navegadores, descubrí que mi respuesta a continuación solo funcionó para mí en Chrome y no en Firefox

Tuve el mismo problema y solucioné esto con display: table en el div principal y display table-cell en cada div gracias a esta respuesta en stackoverflow :

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

Y el css:

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

RvdBerg
fuente

Dimensionamiento del mapa del folleto dentro de bootstrap

Respuestas:

Referencias