1

estou com dificuldades em fazer o conteúdo internet do meu menu lateral acompanhar minha div, o meu menu tem opções que se expandem, quando abro todas as opções o conteúdo sai fora da div, eu gostaria que a div acompanhasse o conteúdo.

Segue o codigo:

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">&nbsp;</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">&nbsp;</span> Cadastrar Modulo
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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">&nbsp;</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">&nbsp;</span> Cadastrar Assunto
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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">&nbsp;</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">&nbsp;</span> Cadastrar Exercicio
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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>

2 Respostas 2

1

Não sei se entendi bem, mas seria mais ou menos isso?

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%; 
overflow: auto;
overflow-x: hidden;
}

.nav-side-menu {
font-family: Helvetica,Arial,sans-serif;
color: #dee2e6;
font-size: 14px;
height: 100%;
}
<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">&nbsp;</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">&nbsp;</span> Cadastrar Modulo
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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">&nbsp;</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">&nbsp;</span> Cadastrar Assunto
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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">&nbsp;</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">&nbsp;</span> Cadastrar Exercicio
                        </a></li>
                        <li><a class="" href="#">
                            <span class="fa fa-arrow-right">&nbsp;</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" id="div-dashboard">

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

2
  • Não, deixa eu te explicar melhor como meu menu funciona, nele vai ter algumas opções, por exemplo, usuário, quando clico em usuário o menu expande e surge duas novas opções por exemplo, cadastrar e listar, o problema e que se eu expandir todas as opções do menu, a div não acompanha, do jeito que você botou a div corta as ultimas opções, não aparece na tela, e do jeito que tava ela mostra, porem a div não acompanha as opções, sacou? Commented 28/02/2018 às 20:42
  • Opq, eu tinha feito errado. eu coloquei uma barra de rolagem no menu. Isso permite que ela acompanhe, afinal, não tem como fazer de outra forma. Ele não está acompanhando como você disse antes pois agora a posição está fixa. Caso não seja desta forma que te agrade, precisa rever a posição do HTML. Editei acima. Dá uma olhada... Commented 28/02/2018 às 20:45
1

Seguindo o exemplo que o @DiegoSantos postou na sua outra pergunta. E com o que vc falou agora acho que é isso que vc quer. Que a barra de rolagem apareça quando o conteúdo do filho for maior que a altura do pai correto?

Para isso basta colocar na .nav-side-menu um overflow-y:auto

Veja no exemplo se é isso que vc precisa cliquei em Modulo . (obs: coloquei um padding nas LI apenas para fazer o scroll aparecer.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    html, body {
height: 100%;
overflow: hidden;
}

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;
width: 200px;
height: 100%;
border-top-right-radius: 5px;
background-color: silver;
overflow-y: auto;
}

#sidebar-collapse, .row, .container-fluid{
 height: 100%; 
}

li {
    padding: 10px;
}
</style>
</head>
<body>
    
    <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">&nbsp;</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">&nbsp;</span> Cadastrar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                                <li><a class="" href="#">
                                    <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                                </a></li>
                            </ul>       
                        </li>
        
                    </ul>
        
                </div>
            </div><!-- Fim Sidebar -->
        
            <div class="col-sm-10">
        
                <section class="dashboard">
        
        
                </section>
        
            </div>
        </div>
        </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .