0

hola soy nuevo en stack les paso a comentar mi problema estoy desarrollando un visor en el cual cuando hago zoom menor al 100% los elementos ocupan el ancho completo de la pagina pero no a si su alto, les dejo una imagen de como se ve esto. captura de pantalla del problema

mi objetivo seria que mi pagina mantenga los espacios en blanco cubiertos en los navegadores, es posible esto?

utilice esta etiqueta sin resultados

<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">

les dejo también el código del body por si llegan a notar algo mal que estoy haciendo

<body>

<header>
<div class="d-flex container-fluid">
    <div class="d-flex flex-fill">
        <nav class="navbar navbar-expand-sm bg-success navbar-dark flex-fill">
          <a class="navbar-brand" href="#">
            <img src="images/logo Sigma 200px.jpg" alt="Logo" width="200px">
          </a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>    
            </ul>
          </div>  
        </nav>
    </div>
</div>
</header>

<div class="d-flex flex-row container-fluid">

    <div class="card bg-light flex-grow-1">
        <div class="card-header">Mapa de establecimientos</div>
        <div class="card-body">
            <div class="p-2 bg-warning flex-grow-1" id="mapMonit">

            </div>
        </div>
    </div>

</div>

espero su respuestas. Saludos!

2
  • Es difícil decir pero creo que tu problema es en el CSS. Prueba html, body{min-height:100vh;}. Poco probable pero es lo primero que tienes que comprobar.
    – enxaneta
    Commented el 30 sept. 2018 a las 8:38
  • muchas gracias por responder, intente lo que me sugeriste pero no resulto..
    – foxly18
    Commented el 30 sept. 2018 a las 18:04

1 respuesta 1

0

En teoría lo que te recomienda @enxaneta es la respuesta correcta, supongo que no crece el mapa, porque este no tiene una altura que corresponda al alto del contenedor, por lo que prueba con colocar:

#mapMonit{
  min-height: 100vh;
}

Prueba si esta vez si sucede el cambio, en todo caso puedes ajustar los 100vh a la medida que consideres.

Si el mapa crece, pero no se ve es porque algún contenedor tiene overflow: hidden y si crece, pero sobrepasa a su contenedor, es porque alguno de estos, tiene delimitado un height.

Para cada caso anterior, existe una solución, pero antes prueba lo sugerido y con los comentarios vamos añadiendo más detalles a esta respuesta.

Actualización

Para calcular mejor la medida y evitar el scroll, te invito a usar la función calc de css, de esta forma:

#mapMonit{
  --x: 100px; 
  /*O valor de la altura del navbar en pixeles, 
  * más los margin o padding del contenedor*/
  min-height: calc( 100vh - var(--x) );
}
3
  • Hola @EdgarGutiérrez gracias por tu respuesta me ayudo a aclarar lo que estaba sucediendo. Me Funciono en el caso de que mantenía el alto del contenedor al hacer zoom, lo curioso que note es que dependiendo de los valores que le daba aparecía la barra del scroll en el navegador...habría una posibilidad de detectar el porcentaje del zoom en el navegador y en base a eso aplicarle las medidas CSS al contenedor del mapa??...
    – foxly18
    Commented el 1 oct. 2018 a las 19:11
  • Supondría que primero puedes calcular en pixeles cuanto mide la barra navbar y restarla, algo así como te actualice en mi respuesta. Commented el 1 oct. 2018 a las 22:29
  • muchisimas gracias @EdgarGutiérrez!!, me sirvió de mucho
    – foxly18
    Commented el 3 oct. 2018 a las 11:25

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.