Can't make div 100% height of screen

Question

I want to do that #nav and #contenido fill all of remaining screen,

My body

<header>
    <?php include "includes/header.php"; ?>
</header>

<aside id="nav">
    <?php include("includes/nav.php") ?>
</aside>

<div id="contenido">
    <?php include("pages/pages.php"); ?>
</div>


<footer class="centradohorizontal centradovertical">
    <?php include "includes/footer.php"; ?>
</footer>

At header.php there is a simple header, and at footer.php too

my css its: (I have removed the css from header and footer)

body {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head head" "navegacion contenido" "foot foot";
    color: #333 !important
}

header {
    grid-area: head
}

#nav {
    grid-area: navegacion;
    background-color: #eb322a !important;
    height: 100%
} 

#contenido {
    grid-area: contenido;
    height: 100%
}


.centradovertical {
    display: flex;
    align-items: center
}

.centradohorizontal {
    display: flex;
    justify-content: center
}

My problem its rounded:

i want to do that the red div expand 100% but i put heigth 100% and it does not work

Answer 1

height:100% will only works when the parent has a fixed height, if parent still has height in percentage, then you need to add 100%to all html parents including html and body.

With your html, if you add the following:

html, body {height:100%;}

It should be enough to make it work. Try it out.