0
106
VistasDiv no se ajusta al espacio disponible
Sé que esta pregunta ya se ha hecho, pero probé todo y no encontré una solución, así que vuelvo a preguntar, mis disculpas :-).
Estoy tratando de hacer que mi fila llene todo el espacio de pantalla restante de la página, sin embargo, mi fila nunca se reduce, permanece en su tamaño inicial.
Tenga en cuenta que mi mapa se ajusta al tamaño del div.
Aquí está el código que estoy usando:
<div class="row"> <div class="col-xl-12 col-md-12 mb-12 col-lg-12 "> <div class="card shadow mb-4 h-100"> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> <h6 class="m-0 font-weight-bold text-primary"> Carte des balises </h6> </div> <div class="card-body"> <div id="map"></div> </div> </div> </div> </div> Y ahí está el render de la página: 
Si alguien pudiera darme alguna pista, se lo agradecería mucho!
Gracias por adelantado, :)
1 Respuestas
Responde la pregunta0
<div class="card shadow mb-4 h-100">la clase h-100 aquí dice tomar el 100% de la altura de su padre y el elemento padre
<div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">No tiene configuración de altura. Además, todos los elementos de etiqueta de bloque en html no tienen una altura definida de fábrica, sino que depende de su hijo.
Entonces, lo que debe hacer es establecer una altura en el padre, por ejemplo:
En HTML: agregar una clase
<div class="col-xl-12 col-md-12 mb-12 col-lg-12 map-height">CSS: define la clase de la siguiente manera
.map-height{ min-height:calc( 100vh - 300px ) }los 300 px están codificados aquí, pero debe calcular la altura de su encabezado + la sección con 4 etiquetas grandes de altura + altura de pie de página Suponiendo que esas 3 secciones tienen una configuración de altura estática.