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):
<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:
Si alguien tiene alguna idea, o ejemplo se lo agradecería. Saludos.
sticky
con unheight: 100vh
. Haciendo esto no debes preocuparte por el scroll delbody
si esta enoverflow: auto