Side menu with height 100% does not match the size of the "content"

Navigation
0

I have the following structure at the moment:

Sofarsogood,thesidemenuhasheight:100%andisgoingallthewaytothebottomofthepage.Incontent,wehave8inputswhicharenotenoughtogettothebottomofthepage,sothemenuisnormalandnoscrollbarappears(becauseitisnotnecessaryatthemoment).

Nowinthefollowingstructure:

Inthepreviousstructure,wehave14inputs(andstilllower)andnowareenoughtoreachthebottomofthepageandcreatethescrollbar,butthesidemenucontainingheight:100%doesnotmatchthesizeofthedivcontaininginputs.

Iwantedthesidemenutogotothebottomofthepage,trackingthesizeofthedivwiththeinputs.Itdoesnotmatterifthedivwithinputshas500pxheightor3000pxheightor10000pxheight,thesidemenushouldaccompanythesize,howcouldImakeitfollow?>

MenuCSS:

.longBarVertical{width:180px;min-height:100%;background-color:rgb(34,34,50);float:left;}.logoMenu{margin-top:15px;}.logoMenuimg{width:50px;}.menuVertical{position:relative;width:180px;padding:0px;margin-top:15px;}.menuVerticallia{padding-left:15px;line-height:45px;display:block;overflow:hidden;position:relative;text-decoration:none;color:rgb(225,225,225);border-left:5pxsolidtransparent;}

MenuHTML:

<!DOCTYPEhtml><html><head></head><body><divclass="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 Page (which has the 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 page (which has the 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>

Note: I'm using the Bootstrap 4 framework.

    
asked by anonymous 21.11.2017 / 22:24

2 answers

1

It's complicated to make two divs that sisters are not the same height via CSS. I would give jQuery a code that would solve this, but , I suggest an easier solution and using only CSS:

First: Your layout is pretty simple, you only have two divs larger side-by-side, like two columns. Then do the following: create a div-mother and put these two divs into it, this way (this should not affect the original layout of the page): 

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

Second: add the code below to your CSS: 

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

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

In this way you will have solved the problem and when the div of the right grows, it will grow next to div on the left.

    
22.11.2017 / 00:55
0

The height 100% will match the value of the 'parent' element, you must have another div that holds the side menu that is not set with height: 100%; so it assumes the initial size of the browser window without scrolling, since the parent element is as 'auto' by defult and that is the behavior.

What I advise you to do is to put the parent element with height: 100% and if it does not work as test also try:

body, html {     height: 100%; }

    
21.11.2017 / 23:25
Runs splitting several times How to update MySQL results automatically with JavaScript? [closed]