CSS Height Property detailed explanation

Question

I am beginner to web development and I faced this issue and didn't find good answer. I have two HTML code

<html>
<head>
    <style>
        #div{
            background: red;
            height: 100%;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <section id="div">
            <h2>I am Robert</h2>
        </section>
        <section>
            <h1>Hello, this is a test</h1>
            <p>Choose your plan</p>
        </section>
    </main>
</body>

</html>

And this is the second code

<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>uHost</title>
  <link rel="shortcut icon" href="favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
  <style>
     #product-overview {
       background: #ff1b68;
       height: 100%;
     }
  </style>
</head>

<body>
   <main>
      <section id="product-overview">
          <h1>Get the freedom you deserve.</h1>
      </section>
      <section id="plans">
          <h1 class="section-title">Choose Your Plan</h1>
          <p>Make sure you get the most for your money!</p>
      </section>
   </main>
</body>

</html>

Now when applying height: 100% to the first code, the result was that section with height: 100% filled the full screen and when applying the same property to the second code, the section didn't fill the full screen. My question is why height: 100% sometimes fill the entire screen and sometimes not?

I can't reproduce this. In the Stack Snippets I just added, both of the colored boxes are the same height. — Joseph Sible-Reinstate Monica, Jun 22 '19 at 16:50

score 0 · Answer 1 · edited Jun 22 '19 at 19:50

If you want fullscreen use height: 100vh;

#div{
    background: red;
    height: 100vh;
}
h2{
    text-align: center;
}

<html>
<head>
   
</head>
<body>
    <main>
        <section id="div">
            <h2>I am Robert</h2>
        </section>
        <section>
            <h1>Hello, this is a test</h1>
            <p>Choose your plan</p>
        </section>
    </main>
</body>

</html>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

This problem can be solved by adding the tag <!DOCTYPE html> to the beginning of your html files. HTML webpages need this tag to be valid.

The height property set to 100% (generally) makes the height of the element equal to the height of the parent block element. When the parent block element has a height of :auto, the child element will also have a height of :auto.

For more information on how to use percentages as heights (and the source of my second answer), check out this link: Why Height Percentage Isn't Working

CSS Height Property detailed explanation

2 Answers2