A altura do menu vertical não chega a 100% - CSS

Biskit · Janeiro 6, 2022

Meu menu vertical não é 100% alto, ele cobre apenas a página inteira (100vh). Já tentei fazer alterações na folha de estilo css, mas nada funcionou. Acho que é um problema simples, mas não consigo encontrar seu motivo. Preciso do menu vertical (à esquerda) para preencher todas a página, como posso fazer isso?

var data = new Date();
if (data.getDate() <= 9) {
    var hoje = "0" + data.getDate() + "/"
} else {
    var hoje = data.getDate() + "/"
}
if ((data.getMonth() + 1) <= 9) {
    var mes = "0" + (data.getMonth() + 1) + "/"
} else {
    var mes = (data.getMonth() + 1) + "/"
}
hoje += mes + "/" + data.getFullYear()
document.getElementById('data').innerHTML = "<center><hr>" + hoje + "</center>"

body,
html {
    height: 100%;
}

.estilo {
    height: 100% !important;
    background-color: rgb(245, 245, 245);
    min-width: 15rem;
    max-width: 15rem;
    position: absolute;
    display: flex;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    left: 0;
    transition: all 0.4s;
}

.page-content {
    width: calc(100% - 18rem);
    margin-left: 17rem;
    transition: all 0.4s;
}

#data {
    width: 100%;
    top: -17px;
    position: relative;
}

#logout:hover {
    transition: all 0.4s;
    color: #F26666;
}

[contenteditable]:focus {
    outline: 0.1px solid #979797;
}

.switch {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}

.switch+label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.switch {
    visibility: hidden;
    position: relative;
    margin-left: -9999px;
}

.switch+label {
    display: block;
    position: relative;
    float: right;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.switch--shadow+label {
    padding: 2px;
    width: 50px;
    height: 25px;
    background-color: #dddddd;
    border-radius: 60px;
}

.switch--shadow+label:before,
.switch--shadow+label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}

.switch--shadow+label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
}

.switch--shadow+label:after {
    width: 22px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.4s;
}

.switch--shadow:checked+label:before {
    background-color: #71c7f8;
}

.switch--shadow:checked+label:after {
    transform: translateX(27px);
}

.methods label:hover {
    cursor: pointer;
    color: #4279b8;
    transition: all 0.4s;
}

#mets span {
    font-weight: 900;
}

#mets label {
    margin-bottom: .25rem!important;
}

.admin p:hover {
    color: #3257AB;
    cursor: pointer;
    transition: all 0.2s;
}

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <meta charset='utf-8'>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <title>Example</title>
   </head>
   <body>
      <nav class="navbar navbar-expand-lg navbar-dark" style='background-color: rgb(42,63,84)'>
         <div class="container-fluid">
            <a class="navbar-brand" href="http://localhost/Métodos/home">HOME</a>
            <div class="collapse navbar-collapse" style="position: relative !important; margin-left: 79%;display:flex !important">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0" style='display:flex !important'>
                  <li class="nav-item" style='display:flex !important'>
                     <span class="nav-link active" href="#"><i class="far fa-user"></i><?= "     ".$_SESSION["login"]; ?></span>
                     <a class="nav-link active" href="#" id="logout" onclick="window.location.href = 'logout'"><i class="fas fa-sign-out-alt"></i></a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="estilo h-100" style="z-index: 1 !important">
      <nav class="p-3" style='width: 100% !important;'>
         <ul class ="nav navbar-nav p-0">
            <nav>
               <form class="container-fluid p-0">
                  <div class="input-group p-0">
                     <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
                     <input type="text" class="form-control" placeholder="Search">
                  </div>
               </form>
            </nav>
            <hr>
            <div style="width: 100%;height: 400px;overflow: auto">
            <li class ="nav-item mt-4">
               <details>
                  <summary> <i class="far fa-folder text-primary"></i> Pedidos</summary>
                  <div class="ms-3 text-primary mt-2 mb-2 admin">
                     <p onclick="admgetContent('analise')" id="analise" class="mb-2"><span><i class="fas fa-exclamation-circle text-warning"></i></span>&nbsp;&nbsp;Em análise</p>
                     <p onclick="admgetContent('resolvido')" id="resolvido" class="mb-2"><span><i class="fas fa-check-circle text-success"></i></span>&nbsp;&nbsp;Liberados</p>
                     <div class="ms-3 text-primary mt-2 mb-2">
               </details>
            </li>
            </div>
         </ul>
         <div class="text-muted" id="data">
         </div>
         </div>
      </nav>
      <div class="page-content p-2">
         <div id="content">
         Container
         </div>
      </div>
   </body>
</html>

Editado Janeiro 6, 2022 por Biskit
Imagens de referência não estava em ordem ^^

Entrar

A altura do menu vertical não chega a 100% - CSS

Pergunta

Biskit

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades