我想让 #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 中有一个简单的页眉,在 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
}
我的问题已解决:
最佳答案
height:100%
仅当父级具有固定高度时才有效,如果父级仍然具有百分比高度,那么您需要将 100%
添加到所有 html父级,包括 html 和 body。
对于您的 html,如果添加以下内容:
html, body {height:100%;}
这应该足以让它工作。尝试一下。
关于html - 无法使 div 达到屏幕高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47995538/