Can't make div 100% height of screen

html css css3 height

301 观看


36 作者的声誉

This question already has an answer here:

I want to do that #nav and #contenido fill all of remaining screen,

My body

    <?php include "includes/header.php"; ?>

<aside id="nav">
    <?php include("includes/nav.php") ?>

<div id="contenido">
    <?php include("pages/pages.php"); ?>

<footer class="centradohorizontal centradovertical">
    <?php include "includes/footer.php"; ?>

At header.php there is a simple header, and at footer.php too

my css its: (I have removed the css from header and footer)

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

My problem its rounded:

a screenshot of my problem i want to do that the red div expand 100% but i put heigth 100% and it does not work

作者: Daniel 的来源 发布者: 2017 年 12 月 27 日

回应 (1)


5878 作者的声誉


height:100% will only works when the parent has a fixed height, if parent still has height in percentage, then you need to add 100%to all html parents including html and body.

With your html, if you add the following:

html, body {height:100%;}

It should be enough to make it work. Try it out.

作者: Alvaro Menéndez 发布者: 27.12.2017 04:37