Tenho a seguinte estrutura no momento:
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:
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
.
html, body { height: 100%; }
?style.css
tem um:html, body { margin: 0px; padding: 0px; font-family: "myriad-pro", sans-serif; height: 100%; }