Size of div with scrollbar in menu

Question

.sidebar {
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-family: "Roboto", sans-serif;
    background: rgba(0, 0, 0, 0.78);
    width: 250px;
    overflow: hidden;
    display: inline-block;
    height: calc(100vh - 70px);
    position: fixed;
    top: 70px;
    left: 0;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 11 !important;
}



.sidebar .user-info .info-container .user-helper-dropdown {
    position: absolute;
    right: -3px;
    bottom: -10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
}

.sidebar .menu {
    position: relative;
    overflow-y: scroll;
    height: 400px;
}

.sidebar .menu .list {
    list-style: none;
    padding-left: 0;
}

.sidebar .menu .list li.active > :first-child span {
    font-weight: bold;
}

.sidebar .menu .list .header {
    background: #eee;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
}

.sidebar .menu .list i.material-icons {
    margin-top: 4px;
}

.sidebar .menu-toggle {
    color: white;
}

.sidebar .menu .list .menu-toggle:after, .sidebar .menu .list .menu-toggle:before {
    position: absolute;
    top: calc(50% - 14px);
    right: 17px;
    font-size: 19px;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.sidebar .menu .list .menu-toggle:before {
    content: '+';
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.sidebar .menu .list .menu-toggle:after {
    content: '\2013';
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.sidebar .menu .list .menu-toggle.toggled:before {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.sidebar .menu .list .menu-toggle.toggled:after {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.sidebar .menu .list a {
    color: white;
    position: relative;
    display: inline-flex;
    float: left;
    vertical-align: middle;
    width: 100%;
    padding: 10px 13px;
    text-decoration: none !important;
}

.sidebar .menu .list a:hover {
    background-color: #00b69d;
}

.sidebar .menu .list a small {
    position: absolute;
    top: calc(50% - 7.5px);
    right: 15px;
}

.sidebar .menu .list a span {
    margin: 7px 0 7px 12px;
    color: rgb(247, 247, 247);
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
}

.sidebar .menu .list .ml-menu {
    list-style: none;
    display: none;
    padding-left: 0;
}

.sidebar .menu .list .ml-menu span {
    font-weight: normal;
    font-size: 14px;
    margin: 3px 0 1px 6px;
}

.sidebar .menu .list .ml-menu li a {
    padding-left: 55px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle) {
    font-weight: 600;
    margin-left: 5px;
}

.sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle):before {
    content: '\E315';
    font-family: 'Material Icons';
    position: relative;
    font-size: 21px;
    height: 20px;
    top: -5px;
    right: 0px;
}

.sidebar .menu .list .ml-menu li .ml-menu li a {
    padding-left: 80px;
}

.sidebar .menu .list .ml-menu li .ml-menu .ml-menu li a {
    padding-left: 95px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <!-- Barra lateral -->
    <div id="barralateral" class="sidebar">

        <!-- User Info -->
        <div class="user-info row" align="center">
            <div class="image">
                {% if user_foto_sidebar %}
                <a href="{% url 'login:perfilview' %}"><img src="/media/{{user_foto_sidebar}}" alt="User"
                                                            class="centraliza-imagem"/></a>
                {%else%}
                <a href="{% url 'login:perfilview' %}"><img src="/media/imagens/user.png" alt="User"
                                                            class="centraliza-imagem"/></a>
                {%endif%}
            </div>
            <div class="info-container">
                <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                </div>
                {% if user_empresa %}
                <div class="email">{{user_empresa}}</div>
                {% endif %}
                <!--<div class="email">{{request.user.email}}</div>-->

                <div class="user-helper-dropdown">
                    <i class="material-icons" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="true">&#xE313;</i>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="{% url 'login:perfilview' %}"><i class="material-icons">&#xE55A;</i>Perfil</a></li>
                        <li role="seperator" class="divider"></li>
                        <li><a {% if user_empresa %} href="{% url 'cadastro:editarempresaview' user_empresa.id %}"
                               {%else%} class="popup" title="Selecionar Empresa"
                               href="{% url 'login:selecionarempresaview' %}" {%endif%}><i class="material-icons">&#xE0AF;</i>Minha
                            Empresa</a></li>
                        <li role="seperator" class="divider"></li>
                        <li><a href="{% url 'login:usuariosview' %}"><i class="material-icons">&#xE7FB;</i>Usuários</a>
                        </li>
                        <li role="seperator" class="divider"></li>
                        <li><a id="logout-btn" href="{% url 'login:logoutview' %}" title="Sair"><i
                                class="material-icons">&#xE879;</i>Sair</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- #User Info -->

        <!-- Menu -->
        <div class="menu">
            <ul class="list">
                <li class="active">
                    <a href="{% url 'base:index' %}">
                        <span>Página Inicial</span>
                    </a>
                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle"
                        <span>Cadastro</span>
                    </a>

                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <span>Vendas</span>
                    </a>

                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <span>Compras</span>
                    </a>

                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <span>Boletos</span>
                    </a>

                </li>


                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <i class="material-icons">&#xE8B0;</i>
                        <span>Fiscal</span>
                    </a>

                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <i class="material-icons">&#xE227;</i>
                        <span>Financeiro</span>
                    </a>

                </li>

                <li>
                    <a href="javascript:void(0);" class="menu-toggle">
                        <i class="material-icons">&#xE1BD;</i>
                        <span>Estoque</span>
                    </a>   
                </li>
                <li>
                    <a href="{% url 'agenda:agendaview' %}">
                        <i class="material-icons">&#xE878;</i>
                        <span>Agenda</span>
                    </a>
                </li>
            </ul>
        </div>
</section>

I have a div for a side menu, in this menu there are several options, these options have sub-options. To scroll the options I edited as follows in css:

.sidebar .menu {
position: relative;
overflow-y: scroll;
height: 450px;
}

But you’re not responsive. On larger screens the menu has extra space, and on smaller screens the menu is cut, not showing all the options, even scrolling the bar.

I’ve tried to put height: 100%;, but the div gets larger than the screen, while scrolling some options do not appear.

How do I make this menu responsive?

The execution of the code here in the question was a bit of a joke because I use Python and Django and I can’t enter all the information here. But you get a sense of what’s going on.

Answer 1

Dude I made this model that can help you. But explaining your problem is that you’re trying to use scroll in a father who is with position:fixed. To better control this you will need to put some height values, as in the user-info, and then do the calc to subtract from menu height, tb needs to consider the height of the header, that you had defined as 70px. Then the calc would look something like. height: calc(100% - 70px - 100px); for the menu to scroll the right way.

So as you can see vc has 2 fixed height values, 70px header and 100px user info. However this will only get in your way if the user screen is less than 200px high, something very unlikely... So I can use overflow:auto, and the scroll will only appear if the content of the child is greater than the height of the father.

OBS: This is a structure based on your code it is simpler, only for didactic purposes, but I think it will help you understand the layout concept, and if you want to adapt your layout to use this structure feel free.

Follow the code referring to the image above

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 70px;
}
main {
    display: flex;
}
.dados {
    margin-left: 250px;
    padding: 0 1rem;
    position: fixed;
    top: 70px;
    height: calc(100% - 70px);
    overflow-y: auto;
}
.menu {
    position: fixed;
    top: 70px;
    border: 1px solid #000;
    width: 250px;
    height: 100%;
}
aside {
    border: 1px solid #000;
    height: 100px;
}
nav {
    height: calc(100% - 70px - 100px);
    overflow-y: auto;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<header>
    header
</header>
<main>
    <section class="menu">
        <aside>
            user info
        </aside>
        <nav>
            <ul>
                <li><a href="">item 1</a></li>
                <li><a href="">item 2</a></li>
                <li><a href="">item 3</a></li>
                <li><a href="">item 4</a></li>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit minima in repellendus autem eligendi vitae, aspernatur animi consequuntur excepturi accusamus assumenda, iure facilis saepe accusantium tempore sapiente voluptatum delectus impedit numquam quia esse error omnis recusandae? Quam officiis, veniam suscipit commodi temporibus officia voluptates! Soluta laudantium exercitationem animi reprehenderit vitae fugiat doloremque, natus temporibus deleniti dignissimos ad placeat. Laboriosam ducimus 
            </ul>
        </nav>
    </section>
    <section class="dados">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum vero esse dolor nobis tempore culpa, sequi consequuntur amet dolorum distinctio maxime voluptatem reiciendis necessitatibus nulla nam commodi repellendus exercitationem unde quia pariatur perferendis? Quis enim molestias cumque debitis, rerum repellendus. Saepe architecto eius itaque et consequuntur maxime debitis quidem autem iusto nisi praesentium hic aut temporibus corporis possimus, suscipit reprehenderit, ipsam aspernatur deserunt explicabo facilis ipsa repellendus, veniam vel. Sequi culpa explicabo assumenda ratione repellendus. Deleniti aspernatur repudiandae fugit iusto assumenda, at, eligendi sit totam distinctio ipsam nesciunt obcaecati, accusantium asperiores accusamus. Hic laudantium non voluptatum odit adipisci ullam, laboriosam tenetur. Provident voluptatibus reiciendis, deserunt porro aut, blanditiis corrupti illum assumenda quia fugiat. Consectetur eveniet exercitationem nam, voluptas beatae molestias tempore temporibus cum, quibusdam esse nobis ipsum. Eaque soluta non, cupiditate recusandae illo ex cum et eos, modi voluptatibus reiciendis, deserunt porro aut, blanditiis corrupti illum assumenda quia fugiat. Consectetur eveniet exercitationem nam, voluptas beatae molestias tempore temporibus cum, quibusdam esse nobis ipsum. Eaque soluta non, cupiditate recusandae illo ex cum et eos, modi 
    </section>
</main>