Side div with 100% height with Bootstrap 4

Navigation
1

Good afternoon, everyone. I'm breaking my head with the side menu of my site, I want it to have 100% height (using height: 100% did not work), the problem is this, searching the internet saw the tip of using the margin-bottom: -9999px; padding-bottom: 9999px; it worked in parts because the div takes 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 behind this menu, which I want to do exactly and the following :

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

Follow 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>
    
asked by anonymous 28.02.2018 / 20:25

1 answer

1

See, I managed to play 100% heigth, however, I had to play some classes. Maybe it will help, but I recommend reviewing the structure of your HTML. Maybe putting the menu outside the container. Or by setting the container and the specific row, height: 100%.

  

Remembering that ALL parent elements must be set to 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>
    
28.02.2018 / 20:39
: column in front of variable carousel bootstrap 4 mobile only [closed]