1
I’m having trouble making the internet content of my side menu accompany my div, my menu has options that expand, when I open all options the content comes out of the div, I would like div to track the content.
Follow the code:
html, body {
height: 100%;
}
body {
background: linear-gradient(50deg,#6c757d,#dee2e6);
background-attachment: fixed;
font-family: Helvetica,Arial,sans-serif;
overflow-x: hidden;
}
#sidebar-collapse, .row, .container-fluid{
height: 100%;
}
.nav-side-menu {
font-family: Helvetica,Arial,sans-serif;
color: #dee2e6;
font-size: 14px;
height: 100%;
}
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>
<li class="parent"><a data-toggle="collapse" href="#assunto-item-1">
<i class="fa-lg fa fa-newspaper-o"> </i> Assunto <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="assunto-item-1">
<li><a class="" href="#">
<span class="fa fa-arrow-right"> </span> Cadastrar Assunto
</a></li>
<li><a class="" href="#">
<span class="fa fa-arrow-right"> </span> Gerenciar Assunto
</a></li>
</ul>
</li>
<li class="parent "><a data-toggle="collapse" href="#exercicio-item-1">
<i class="fa-lg fa fa-pencil-square-o"> </i> Exercicio <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="exercicio-item-1">
<li><a class="" href="#">
<span class="fa fa-arrow-right"> </span> Cadastrar Exercicio
</a></li>
<li><a class="" href="#">
<span class="fa fa-arrow-right"> </span> Gerenciar Exercicio
</a></li>
</ul>
</li>
<li><a href="#"><i class="fa-lg fa fa-user" aria-hidden="true"></i> Usuario</a></li>
<li><a href="#"><i class="fa-lg fa fa-wrench" aria-hidden="true"></i> Configurações</a></li>
<li><a href="#"><i class="fa-lg fa fa-sign-out" aria-hidden="true"></i> Sair</a></li>
</ul>
</div>
</div><!-- Fim Sidebar -->
<div class="col-sm-10">
<section class="dashboard">
<div class="page-path">
<a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a>
<span> / </span>
<a href="#">Dashboard</a>
</div>
</section>
</div>
</div>
No, let me explain to you how my menu works, in it will have some options, for example, user, when I click user the menu expands and comes up two new options for example, register and list, the problem and that if I expand all menu options, the div does not follow, the way you put the div cuts the last options, does not appear on the screen, and the way it was showing, but the div does not follow the options, Drew?
– DouglasNickson
Opq, I had done it wrong. I put a scroll bar on the menu. This allows it to track, after all, there is no other way to do it. It is not following as you said before because now the position is fixed. If this is not the way you like it, you need to review the HTML position. I edited above. Take a look...
– DiegoSantos