1

Tengo un menu que tiene position: absolute, en donde la altura del menu va dependiendo de la cantidad de items que haya. Generalmente, los contenidos se me muestra bien, pero cuando hay demasiado hacia abajo, aparace un espacio en blanco, debajo del menu que se ve mal(algo parecido):

introducir la descripción de la imagen aquí

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">ejemplo</a>
        </li>
    </ul>
</div>

******CSS*****

#navbarSupportedContent{
    margin-top:10px;
    position:absolute;
}

****html******

<div id="content">
   TITULO
   TABLAS .....
   informacion y contenidos
</div>

La idea es que cuando el contenido de la pagina, sobrepase la altura del menu, aparezca un scroll, en caso contrario, el scroll no se muestre, es decir, una cosa similar a esto:

introducir la descripción de la imagen aquí

Si alguien tiene alguna idea, o ejemplo se lo agradecería. Saludos.

1
  • Podrías cambiar la posición del menú a sticky con un height: 100vh. Haciendo esto no debes preocuparte por el scroll del body si esta en overflow: auto Commented el 12 feb. 2019 a las 20:20

3 respuestas 3

1

En cuanto a estructuración y maquetación de layouts yo siempre recomiendo el uso de flexbox (si no se necesita compatibilidad con IE9 o anteriores). Para tu caso, flexbox se debería aplicar a un elemento (wrapper) que contenga tanto el nav como el content y sería algo como:

<div class="wrapper">
    <ul class="nav">
        <!-- ... -->        
    </ul>
    <div class="content">
        <!-- ... -->
    </div>
</div>

CSS

/* Envoltura */
.wrapper {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;    
}

/* Elementos hijo directamente (que serían: nav y content) */
.wrapper > * {
    overflow: auto;
    flex: 1 1 auto;
}

Te voy a dejar este ejemplo (y no la solución directamente) para que juegues con él y así lo entiendas mejor y lo adaptes a tu caso.

Más sobre flexbox (inglés)

-1

Tú ve ese error una vez, prueba dándole al body y html esto:

body,html{
    width:100%;
    heigth:100%;
}

Te digo esto, para que el menú lateral coja todo el alto, para que así no tengas, que poner ese scroll ;), entonces a tu contenedor menú, tendrías que dar le todo el alto, osea que ocupe el 100% del alto; Esperó qué te sirva.

-1

Agrega las siguientes lineas en tu css

body,html{heigth:100vh;}

#navbarSupportedContent{height: 100vh;}

con el 100vh forza al elemento a ocupar todo el alto del contendor y el contenedor body y html también ocupa todo el alto con el 100vh

2
  • 2
    Hola dav1dth, Agrega una explicación del código por favor ¿Que hace o en que ayuda a resolver el problema planteado por el OP?, te sugerimos realizar tus respuestas en base a Cómo responder, saludos.
    – Jorgesys
    Commented el 13 feb. 2019 a las 21:34
  • Que tal Elenasys ya edite la respuesta no puse desde el inicio porque hace rato en otra pregunta yo ponía así de agrega esto en css y esto en tu js y un usuario me puso que era redundante decirlo que al ver el código ya se sabe donde debe de ir
    – dav1dth
    Commented el 13 feb. 2019 a las 22:56

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.