无法使div 100％的屏幕高度[重复]

Question

这个问题在这里已有答案：

• Why is percentage height not working on my div? [duplicate] 2回答

我想这样做#nav和#contenido填充所有剩余的屏幕，

我的身体

<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有一个简单的标题，也在footer.php

我的css :(我已从页眉和页脚中删除了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
}

我的问题是四舍五入：

qazxsw poi我想这样做，红色div扩大100％，但我把高度100％，它不起作用

Answer 1

仅在父级具有固定高度时才起作用，如果父级仍具有高度百分比，则需要添加height:100%to所有html父级，包括html和body。

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

100%

它应该足以使它工作。试试看。