无法使 div 100% 屏幕高度

Question

我想用#nav 和#contenido 填充所有剩余屏幕，

我的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>

在 header.php 有一个简单的 header，在 footer.php 也有

我的 css 它的：（我已经从 header 和页脚中删除了 css）

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
}

我的问题四舍五入：

我想将红色 div 扩展 100% 但我将高度设置为 100% 但它不起作用

Answer 1

height:100% 仅在父级有固定高度时有效，如果父级仍有百分比高度，则需要将 100% 添加到所有 html 父级，包括 html 和正文。

与您的html，如果您添加以下内容：

html, body {height:100%;}

它应该足够让它工作了。试试吧。

无法使 div 100% 屏幕高度

Can't make div 100% height of screen

html

css

height