0

Tenho a seguinte estrutura no momento:

inserir a descrição da imagem aqui Até aqui está tudo bem, o menu lateral tem height: 100% e está indo até o final da pagina. No conteúdo, temos 8 inputs que não são o suficiente pra chegar até o final da pagina, então o menu fica normal e não aparece barra de rolagem (porque não é necessário até o momento).

Agora na seguinte estrutura:

inserir a descrição da imagem aqui Na estrutura anterior, temos 14 inputs (e mais ainda pra baixo) e agora sim são o suficiente pra chegar ao final da pagina e criar a barra de rolagem, porém o menu lateral que contem o height: 100% não acompanha o tamanho da div que contem os inputs.

O meu desejo era de que o menu lateral fosse até o final da pagina, acompanhando o tamanho da div com os inputs. Não importa se a div com os inputs tem 500px de altura ou 3000px de altura ou 10000px de altura, o menu lateral deveria acompanhar o tamanho, como eu poderia fazer pra ele acompanhar?

CSS do Menu:

.longBarVertical {
    width: 180px;
    min-height: 100%;
    background-color: rgb(34, 34, 50);
    float: left;
}

.logoMenu {
    margin-top: 15px;
}

.logoMenu img {
    width: 50px;
}

.menuVertical {
    position: relative;
    width: 180px;
    padding: 0px;
    margin-top: 15px;
}

.menuVertical li a {
    padding-left: 15px;
    line-height: 45px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: rgb(225, 225, 225);
    border-left: 5px solid transparent;
}

HTML do Menu:

<!DOCTYPE html> 
<html> 
<head>
</head>
<body>
    <div class="longBarVertical">
        <div class="logoMenu text-center">
            <a href="home.php"><img src="img/atom-logo.png"></a>
        </div>
        <ul class="menuVertical">
            <li>
                <a href="#" data-toggle="collapse" data-target="#submenu-1">
                    <i class="fa fa-file-text-o"></i><span>Geradores</span>
                </a>
            </li>
            <div class="submenu">
                <ul id="submenu-1" class="collapse">
                    <li><a href="genMC.php"><i class="fa fa-plus"></i><span> Model/Controller</span></a></li>
                    <li><a href="genSenha.php"><i class="fa fa-minus"></i><span> Senha</span></a></li>
                </ul>
            </div>

            <li>
                <a href="#" data-toggle="modal" data-target="#deslogar">
                    <i class="fa fa-sign-out"></i><span>Sair</span>
                </a>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="deslogar" role="dialog">
        <div class="modal-dialog modal-md" style="width: 210px; text-align: center;"> 
            <div class="modal-content">
                <div class="modal-body" style="padding-bottom: 0px;">
                    <p>Sair?</p>                
                </div>
                <div class="modal-footer" style="padding-top: 5px; padding-bottom: 5px; text-align: center;">
                    <a href="../controller/controller.deslogar.php" type="button" class="btn btn-success" style="width: 80px;">Sim</a>
                    <a href="#" type="button" type="button" class="btn btn-danger" data-dismiss="modal" style="width: 80px;">Não</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS da Pagina (que tem os inputs):

.row .page {
    width: 90%;
}

.row .page .title {
    color: gray; 
    margin-top: 30px; 
    margin-left: 30px;
}

.row .page .content {
    margin-top: 30px; 
    margin-left: 30px;
}

.row .page .content label{
    color: #333;
}

HTML da Pagina (que tem os inputs):

<body>
    <div class="row no-gutters">
        <div class="page">
            <div class="title">
                <h3>Gerador de Model e Controller</h3>
                <hr>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-xl-4">
                        <div class="form-group">
                            <label for="nomeTabela">Nome da Tabela:</label>
                            <input type="text" class="form-control" name="nomeTabela" placeholder="Nome da Tabela">
                        </div>
                    </div>
                    <div class="col-xl-8">
                        <div>
                            <div class="form-group text-center" style="width: 68%; float: left;">
                                <label for="nomeColunas"><b>Nome das Colunas</b></label>
                                <input type="text" class="form-control" name="colunas[]" placeholder="Nome das Colunas">
                                <?php 
                                    for ($i=0; $i < 15; $i++) { 
                                        echo '<input type="text" class="form-control" name="colunas[]" placeholder="Nome das Colunas" style="margin-top: 5px;">';
                                    }
                                ?>

                            </div>
                            <div class="text-center" style="width: 30%; float: right;">
                                <label for="tipoTransfMIA"><b>Adicionar - Remover</b></label>
                                <a id="add" class="pull-left btn btn-success" style="width: 49%;"><i class="fa fa-plus"></i></a>
                                <a id="del" class="pull-right btn btn-danger" style="width: 49%;"><i class="fa fa-minus"></i></a>
                            </div>                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Obs: Estou usando o framework Bootstrap 4.

2
  • Vc tá usando html, body { height: 100%; }?
    – Meu ovo
    21/11/2017 às 22:17
  • Positivo ÐvÐ. No começo meu style.css tem um: html, body { margin: 0px; padding: 0px; font-family: "myriad-pro", sans-serif; height: 100%; }
    – D. Watson
    21/11/2017 às 22:22

2 Respostas 2

1

É complicado fazer duas divs que não são irmãs terem a mesma altura via CSS. Daria para colocar uns códigos em jQuery que resolveria isso, porém, eu sugiro uma solução mais fácil e usando somente CSS:

Primeiro: seu layout é bem simples, possui apenas duas divs maiores lado-a-lado, como se fossem duas colunas. Então, faça o seguinte: crie uma div-mãe e coloque essas duas divs dentro dela, desta forma (isso não deverá afetar o layout original da página):

<div id="wraper">
    <div DIV DA ESQUERDA - MENU>
    </div>
    <div DIV DA DIREITA>
    </div>
</div>

Segundo: adicione o código abaixo ao seu CSS:

#wraper {
  overflow: hidden;
  min-height: 100%;
}

#wraper > div {
   padding-bottom: 500em;
   margin-bottom: -500em;
}

Desta forma você terá resolvido o problema e quando a div da direita crescer, crescerá junto a div da esquerda.

5
  • Fico agradecido pela resposta ÐvÐ, mas não funcionou, talvez eu não tenha colocado os códigos da forma correta ou talvez seja porque o menu lateral ele fica em outra pagina, ele vem pra pagina "home.php" ou qualquer outra por include_once 'menu.php'. Sabendo que vem por include, como eu poderia colocar os codigos sugeridos por você? Obrigado e desculpa pela falta de conhecimento. (Sofro demais com HTML e CSS)
    – D. Watson
    22/11/2017 às 13:20
  • Entendi a logica da sua ideia e percebi que tinha colocado de forma errado sua ideia de código. Criei a <div id="wraper"> na pagina "home.php" e coloquei o include_once 'menu.php' dentro da <div id="wraper">, antes eu colocava o include_once 'menu.php' lá no topo da pagina, na linha 3 mais ou menos. Agora funcionou corretamente.
    – D. Watson
    22/11/2017 às 13:32
  • Muito obrigado pela ajuda ÐvÐ, você já me ajudou em 2 respostas e em uma outra resposta que não foi pergunta minha mas é exatamente a duvida que eu também tinha. Você é fera! Obrigado mesmo.
    – D. Watson
    22/11/2017 às 13:33
  • Somente uma duvida: Qual a função dessas linhas #wraper > div { padding-bottom: 500em; margin-bottom: -500em; }?
    – D. Watson
    22/11/2017 às 13:37
  • @GabrielQ. Valeu cara! Seguinte, isso é só um hack para deixar as duas divs com altura igual. Ele adiciona um padding inferior enorme e uma margem inferior negativa do mesmo tamanho. Assim, as divs ficam com uma altura enorme mas na mesma posição, e o overflow: hidden no wraper é para que isso não gere uma barra de rolagem. Por ser um hack, é como se fosse uma gambiarra, porque o CSS não possui facilidades para fazer isso, exceto se usasse display: flex, mas isso ia dar problema com o Bootstrap.
    – Meu ovo
    22/11/2017 às 14:31
0

O height 100% vai acompanhar o valor do elemento 'pai', você deve ter uma outra div que segura o menu lateral que não está definida com height: 100%; logo ela assume o tamanho inicial da janela do navegador sem a rolagem, pois o elemento pai está como 'auto' por defult e é esse o comportamento.

O que aconselho a fazer é colocar o elemento pai com height: 100% e caso não funcione como teste também tente:

body, html { height: 100%; }

1
  • No começo do meu arquivo CSS eu tenho o seguinte código: html, body { margin: 0px; padding: 0px; font-family: "myriad-pro", sans-serif; height: 100%; }. A div do menu é a longBarVertical e ela tem o height: 100%, o maximo que ela pode ter de "div pai" é a body e a html e eu tentei colocar um <body style="height: 100%"> mas continou do mesmo jeito.
    – D. Watson
    21/11/2017 às 22:34

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 .