0

Boa noite, estou utilizando CSS para estilização de um menu na vertical, porém quando tento aplicar 100% de altura ele não corresponde

código html

<div class="menu-principal">
    <ul class="nav flex-column">
        <li class="nav-item">            
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
        </li>        
    </ul>
</div>

css

li:first-child {
    height: 150px;
    background:black;
    text-align: center
}

li a:hover {
    background:black;
}

a {
    color: white;
}

.menu-principal {
    height: 100%;
    width: 240px;
    background: red;
}

inserir a descrição da imagem aqui

o menu em vermelho deveria pegar 100% da altura

obs: estou utilizando bootstrap tb

0

1 Resposta 1

1

Você precisa também dizer, pra body e html que eles precisam de 100% de height

html, body {
    height: 100%;
}
1
  • Não funciona, brother Commented 16/04/2019 às 2:06

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .