1

Boa tarde, pessoal. Estou quebrando a cabeça com o menu lateral do meu site, quero que o mesmo tenha 100% de height (utilizando height:100% não funcionou), o problema é o seguinte, pesquisando na internet vi a dica de utilizar o margin-bottom: -9999px; padding-bottom: 9999px; funcionou em partes, pois a div ocupa mais que a tela ficando o scroll do lado, outro problema é que seu site e responsivo, então em telas menores o resto do conteúdo acaba ficando atrás desse menu, o que eu quero fazer exatamente e o seguinte:

Quero que meu menu lateral complete toda a altura da tela, mas que quando eu diminua a tela ele não sobreponha o restante do conteúdo, não sei se fui claro o suficiente:

Segue meu 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>
3
  • Poste o seu HTML. Se você setar o height como 100% já deveria funcionar, a não ser que os parents superiores deles não tenham height definido, o que é comum no bootstrap... Commented 28/02/2018 às 19:30
  • 1
    @DiegoSantos html adicionado, eu coloquei o height 100% na div lateral, e na div container que e a div pai, e mesmo assim não funcionou. Commented 28/02/2018 às 19:34
  • veja em minha resposta, se te atende... Commented 28/02/2018 às 19:39

1 Resposta 1

1

Veja, consegui jogar o heigth 100%, porém, tive que mexer em algumas classes. Talvez te ajude, mas recomendo revisar a estrutura do seu HTML. Talvez, colocando o menu fora do container. Ou setando no container e na row específica, o height: 100%.

Lembrando que TODOS os elementos pai devem estar com altura definida para funcionar

.

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>

7
  • 1
    Deu certo amigo, muito obrigado, irei testar e tentar melhorar o meu código, mas a principio a sua solução resolveu o que eu tava querendo. Muito Obrigado! Commented 28/02/2018 às 19:43
  • Imagina... Mas recomendo mesmo que tire o menu dali. Sempre que fiz desta forma tive muitos problemas rsrs. Commented 28/02/2018 às 19:43
  • entretanto, aperriando novamente, vi agora que tá acontecendo um probleminha, o menu lateral não acompanha o conteúdo, no meu caso o menu se expande, quando abro todos alguns opções ficam cortadas, tem como arrumar isso? Commented 28/02/2018 às 19:54
  • Hum, esse é um problema que já tive muitas vezes. hahah Experimente tirar o menu da estrutura. Ele será filho apenas de body. Posicione ele com display: fixed. Posicione o conteúdo da página. Desta forma, pode rolar a página ou fazer qualquer coisa que ele não vai se mexer Commented 28/02/2018 às 19:54
  • Fiz o teste, não funcionou, a div lateral não acompanha o conteúdo interno.... :( Commented 28/02/2018 às 20:06

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 .