Rows are not filling up the height

190
December 10, 2017, at 4:03 PM

I have been experimenting a bit with CSS Grid and trying to develop a simple webpage. I am using the fr unit to evenly create display my content and make it responsive. The columns are evenly created to fill up the space of the screen. But the rows on the other hand are not filling up the space. They are being created but not to fill up the whole height of the screen.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
  <title>Name of Site</title>
</head>
<body>
  <div class="container">
    <header class="header box">
      <h1>Name</h1>
    </header>
    <nav class="info box">
      <h2>General Information</h2>
    </nav>
    <div class="right box">
      <h3>Right</h3>
    </div>
    <footer class="footer box">
      <h2>Footer</h2>
    </footer>
  </div>
</body>
</html>

Here is my CSS Code:

/* Resets */
  body {
  margin: 0;
}
/* Typography */
h1, h2, h3 {
  font-family: 'Roboto';
  text-align: center;
  font-variant-caps: all-petite-caps;
}
ul, li, p {
  font-family: 'Roboto';
}
.box {
  color: #ffffff;
  padding: 10px 10px;
}
/* CSS Grid */
@media (min-width: 960px) {
  .container {
    display: grid;
    grid-template-areas:
      "h r"
      "i r"
      "f r"; 
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 3fr 1fr;
  }
}
.header {
  grid-area: h;
  background-color: #57B8BF;
}
.info {
  grid-area: i;
  background-color: #3A7B7F;
}
.footer {
  grid-area: f;
  background-color: #1D3D40;
  color: #ffffff;
}
.right {
  grid-area: r;
  background-color: #ffffff;
  color: black;
}

The result I keep getting is this:

.

I have the Firefox Grid display so you can see how the grid is laid out. But i the image I have written in red the space that is now being included when making a the rows. Isn't the footer suppose to be at the end within its column?

How do I get the rows to evenly distribute the height of the page jsut like it is being done with the columns?

Answer 1

Just adjust your container and html, body to 100% height

html, body {
  height: 100%;
}
.container {
  height: 100%;
}

html, body { 
  height: 100%; 
} 
 
body { 
  margin: 0; 
} 
 
/* Typography */ 
 
h1, h2, h3 { 
  font-family: 'Roboto'; 
  text-align: center; 
  font-variant-caps: all-petite-caps; 
} 
 
ul, li, p { 
  font-family: 'Roboto'; 
} 
 
.box { 
  color: #ffffff; 
  padding: 10px 10px; 
} 
 
/* CSS Grid */ 
@media (min-width: 960px) { 
  .container { 
    height: 100%; 
    display: grid; 
    grid-template-areas: 
      "h r" 
      "i r" 
      "f r";  
    grid-template-columns: 1fr 2fr; 
    grid-template-rows: 1fr 3fr 1fr; 
  } 
} 
 
.header { 
  grid-area: h; 
  background-color: #57B8BF; 
} 
 
.info { 
  grid-area: i; 
  background-color: #3A7B7F; 
} 
 
.footer { 
  grid-area: f; 
  background-color: #1D3D40; 
  color: #ffffff; 
} 
 
.right { 
  grid-area: r; 
  background-color: #ffffff; 
  color: black; 
}
<div class="container"> 
    <header class="header box"> 
      <h1>Name</h1> 
    </header> 
    <nav class="info box"> 
      <h2>General Information</h2> 
    </nav> 
    <div class="right box"> 
      <h3>Right</h3> 
    </div> 
    <footer class="footer box"> 
      <h2>Footer</h2> 
    </footer> 
  </div>

Answer 2

I had the same issue,

use this:

.container{
  width: 100%;
    height: 100vh;
}
Rent Charter Buses Company
READ ALSO
Checkboxes disappear when materializecss is applied (using django)

Checkboxes disappear when materializecss is applied (using django)

The code with the css makes the checkboxes disappear for cashThey have been initialised as boolean variables in the model(using django)

238
Javascript Animation in background and website code in the front

Javascript Animation in background and website code in the front

I would love to make a website with this code in the background and then a website with a menu bar in top as naviagtion and then add some images and text and footer

226
How do I include my css file, while using Java and Spring with thymeleaf?

How do I include my css file, while using Java and Spring with thymeleaf?

I have tried different apporachesFor me, most logical would be the standard way, as I have it now in my "Item

304
how to set an anchor on a div without text inside of it

how to set an anchor on a div without text inside of it

is it possible to set an anchor on a div in which is no text? I have this div:

246