CSS does not apply 100%

Question

Good evening, I’m using CSS to style a menu vertically, but when I try to apply 100% height it doesn’t match

html code

<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;
}

the menu in red should pick up 100% of the height

Obs: I’m using tb bootstrap

Answer 1

You must also say, to body and html that they need 100% of height

html, body {
    height: 100%;
}