how to structure html5 to avoid spaces with certain zoom

Question

how to structure html5 to avoid spaces with certain zoom

Navigation

#1 by (0 votes)

0

Hi, I'm new to the stack, I'll comment on my problem I am developing a viewer in which when I zoom less than 100% the elements occupy the full width of the page but not if its high, I leave an image of how this looks.

my goal would be that my page keep the blanks covered in browsers, is this possible?

use this tag without results

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

I also leave the body code in case you get to notice something wrong that I'm doing

<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>

I wait for your answers. Greetings!

javascript html5 css

asked by foxly18 29.09.2018 в 23:18

source

1 answer

I do not understand the error that C # and the VisualStudio work environment is generating me Wireshark and the https

score 0 · Accepted Answer

In theory what recommends @enxaneta is the correct answer, I guess the map does not grow, because it does not have a height that corresponds to the height of the container, so try placing:

#mapMonit{
  min-height: 100vh;
}

Test if this time if the change happens, in any case you can adjust the 100vh to the extent you consider.

If the map grows, but can not be seen, it is because some container has overflow: hidden and if it grows, but exceeds its container, it is because one of these has a height delimited.

For each previous case, there is a solution, but first try the suggested and with the comments we will add more details to this answer.

Update

To calculate the measurement better and avoid scrolling, I invite you to use the function calc of css , like this:

#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) );
}