Div does not accompany internal bootstrap 4 content

Navigation
1

I'm having difficulty making the internet content of my side menu follow my div, my menu has options that expand, when I open all the options the content comes out of the div, I would like the div to accompany the content. / p>

Follow the code below: 

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>

    
asked by anonymous 28.02.2018 / 21:30

2 answers

1

I do not know if I understood correctly, but would it be more or less? 

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>
    
28.02.2018 / 21:38
1

Following the example that @DiegoSantos posted on your other question. And with what you said now I think that's what you want. Does the scroll bar appear when the child's content is greater than the correct parent height?

To do this, just put .nav-side-menu a overflow-y:auto

See in the example if this is what you need click Modulo . (I put a padding in the LI just to make the scroll appear.) 

<!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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
    
01.03.2018 / 14:33
Registering the value of a variable in a table Regex with JavaScript - Taking only part of String