Side div with 100% height with Bootstrap 4

Question

Good afternoon, you guys. I am breaking my head with the side menu of my site, I want it to be 100% height (using height:100% did not work), the problem is this, searching the internet I saw the tip to use the margin-bottom: -9999px; padding-bottom: 9999px; worked in parts, because div occupies more than the screen getting the scroll on the side, another problem is that your site is responsive, so on smaller screens the rest of the content ends up getting behind this menu, what I want to do exactly and the following:

I want my side menu to complete the entire screen height, but when I lower the screen it does not overlap the rest of the content, I don’t know if I was clear enough:

Follows my 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">&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>

            </ul>

        </div>
    </div><!-- Fim Sidebar -->

    <div class="col-sm-10">

        <section class="dashboard">


        </section>

    </div>
</div>
</div>

Answer 1

You see, I was able to play the 100% heigth, but I had to move some classes. It might help you, but I recommend revising the structure of your HTML. Maybe by putting the menu out of the container. Or by setting in the container and in the specific Row, the height: 100%.

Remembering that ALL parent elements must be at set height to work

.

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;
height: 100%;
width: 40%;
border-top-right-radius: 5px;
background-color: red;
}

#sidebar-collapse, .row, .container-fluid{
 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>

            </ul>

        </div>
    </div><!-- Fim Sidebar -->

    <div class="col-sm-10">

        <section class="dashboard">


        </section>

    </div>
</div>
</div>