Boa tarde, pessoal. Estou quebrando a cabeça com o menu lateral do meu site, quero que o mesmo tenha 100% de height (utilizando height:100% não funcionou), o problema é o seguinte, pesquisando na internet vi a dica de utilizar o margin-bottom: -9999px; padding-bottom: 9999px; funcionou em partes, pois a div ocupa mais que a tela ficando o scroll do lado, outro problema é que seu site e responsivo, então em telas menores o resto do conteúdo acaba ficando atrás desse menu, o que eu quero fazer exatamente e o seguinte:
Quero que meu menu lateral complete toda a altura da tela, mas que quando eu diminua a tela ele não sobreponha o restante do conteúdo, não sei se fui claro o suficiente:
Segue meu CSS:
html, body {
height: 100%;
overflow: auto;
}
body {
background: linear-gradient(50deg,#6c757d,#dee2e6);
background-attachment: fixed;
font-family: Helvetica,Arial,sans-serif;
overflow-x: hidden;
}
.nav-side-menu {
font-family: Helvetica,Arial,sans-serif;
color: #dee2e6;
overflow: hidden;
font-size: 14px;
margin-bottom: -9999px;
padding-bottom: 9999px;
border-top-right-radius: 5px;
}
HTML
<div class="container-fluid">
<div class="row">
<!-- Inicio Sidebar -->
<div class="col-sm-2" id="sidebar-collapse">
<div class="nav-side-menu bg-dark" >
<div class="sidebar-profile-pic"></div>
<span class="nav-link sidebar-profile-name">Douglas Nickson</span>
<div class="divider"></div>
<ul class="nav" style="display:block;">
<li><a href="index.html"><i class="fa-lg fa fa-dashboard" aria-hidden="true"></i> Dashboard</a></li>
<li class="parent"><a data-toggle="collapse" href="#modulo-item-1">
<i class="fa-lg fa fa-book"> </i> Modulo <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="fa fa-plus"></em></span></a>
<ul class="children collapse" id="modulo-item-1">
<li><a class="" href="cadastrar-modulo.html">
<span class="fa fa-arrow-right"> </span> Cadastrar Modulo
</a></li>
<li><a class="" href="#">
<span class="fa fa-arrow-right"> </span> Gerenciar Modulo
</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- Fim Sidebar -->
<div class="col-sm-10">
<section class="dashboard">
</section>
</div>
</div>
</div>