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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想这样做#nav和#contenido填写所有剩余的屏幕，不能使屏幕的分度100％的高度

我的身体

<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％，这是行不通的

回答：

height:100%当家长有一个固定的高度将只适用，如果父母仍然拥有百分比身高，那么您需要将100%添加到所有的HTML父母，包括html和body。

随着你的HTML，如果你添加如下内容：

html, body {height:100%;}

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

以上是 不能使屏幕的分度100％的高度 的全部内容， 来源链接： utcz.com/qa/266323.html

回到顶部