不能使屏幕的分度100％的高度

Question

我想這樣做#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 
} 

我的問題了四捨五入：

我想要做的是，紅色的div擴大100％，但我把heigth 100％，這是行不通的

Answer 1

height:100%當家長有一個固定的高度將只適用，如果父母仍然擁有百分比身高，那麼您需要將100%添加到所有的HTML父母，包括html和body。

隨着你的HTML，如果你添加如下內容：

html, body {height:100%;} 

這應該足以使它工作。試試看。