Why the height of the header is not growing while using percentage%?

Question

I am trying to make the header that it will occupy the 20% to 40% of the body but when i am trying to work with the percentages it is not working but with the pixels it works . I want to know why its not working with percentages?

*{
  margin:0;
  padding:;
  box-sizing:border-box;
}
html{
  padding:3em;
}

header{
  width:100%;
  background:#e74c3c;
  height:30%;

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <header>
    <h1> Javascript </h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
    <li>contact </li>
    <li>gallery</li>
    <li>about us</li>
   </ul>
  </nav>
  <div class="content">
    <h1>learn javascript</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam, explicabo commodi tempora maiores facere qui <BR></BR>ratione nostrum unde rem placeat, distinctio similique quod quos ullam autem molestiae? Perferendis vero hic temporibus quaerat, aut tempore ipsam expedita fuga ea cupiditate eius sit <BR></BR> unde, dolorem earum enim quos, omnis voluptates deserunt commodi rem veritatis? Quam at ipsum excepturi deserunt quae! Debitis ab fugit error dolore! Maiores sunt hic suscipit? Nihil, quis.
  </div>
  <aside>
    <ul>
      <li>home </li>
      <li>contact</li>
      <li>galley</li>
      <li>about</li>
    </ul>
  </aside>
  <footer>
      <p class=end-text>shayan kanwal@copyright 2020</p>
  </footer>
</body>
</html>

additional to my answer this post here explains more in depth why this is happening: https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work — Warden330, Oct 22 '20 at 09:10
you want your header be 30% of what ? the whole body ? The whole html ? as your html and body do not have height, with fixed unit it will take line-height of header. set `vh` unit and it should change — MaxiGui, Oct 22 '20 at 09:10
If the header is 30% of body height and body height depends on the height of header (and other things) then it'll create a cycle. Chicken or egg. — Salman A, Oct 22 '20 at 09:32

Warden330 · Answer 1 · 2020-10-22T09:22:49.707

Edit: So as MaxiGui mentioned it is not a good idea to give your html or body a fixed height. The Example has been edited to use a unit for the height which makes way more sense in this case.

Answer to your Question: In the curretn version of CSS the % value is not working as you might expect it to when you use it on the height-parameter. It only works if the parent-element has a fixed height. So it is usable inside other elements, DONT do this with body or html as it will definetly destroy your Layout at some point. height of, for example, a block-element is refering to the height of it's contents. You can look at THIS post for further explanation as to why and how.

*{
  margin:0;
  padding:;
  box-sizing:border-box;
}
html{
  padding:3em;
}

header{
  width:100%;
  background:#e74c3c;
  /*vh is a unit that uses the current height that is available on the viewport, it basically is:
relative to 1% of the height of the viewport, so 30vh = 30% of the viewports available height*/
  height:30vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <header>
    <h1> Javascript </h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
    <li>contact </li>
    <li>gallery</li>
    <li>about us</li>
   </ul>
  </nav>
  <div class="content">
    <h1>learn javascript</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam, explicabo commodi tempora maiores facere qui <BR></BR>ratione nostrum unde rem placeat, distinctio similique quod quos ullam autem molestiae? Perferendis vero hic temporibus quaerat, aut tempore ipsam expedita fuga ea cupiditate eius sit <BR></BR> unde, dolorem earum enim quos, omnis voluptates deserunt commodi rem veritatis? Quam at ipsum excepturi deserunt quae! Debitis ab fugit error dolore! Maiores sunt hic suscipit? Nihil, quis.
  </div>
  <aside>
    <ul>
      <li>home </li>
      <li>contact</li>
      <li>galley</li>
      <li>about</li>
    </ul>
  </aside>
  <footer>
      <p class=end-text>shayan kanwal@copyright 2020</p>
  </footer>
</body>
</html>

It is not a good practice do make this way... If you add fix height on body, you need to set `oveflow-y:auto;` otherwise all elements would not be anymore in `body` — MaxiGui, Oct 22 '20 at 09:12
@MaxiGui it definetly is not a good practice, i also added a hint to use other units than % for this specific height. But his Question was focused on "Why does that not work" not how to make it better. You are right tho that we should definetily mention that — Warden330, Oct 22 '20 at 09:14
Sure but try to think that he will use your code. like "copy / paste". So make it better and I will remove downvote by adding the overflow for example — MaxiGui, Oct 22 '20 at 09:15
@MaxiGui True, that would be a problem, i get your point. Answer has been edited, thanks for making me aware of that — Warden330, Oct 22 '20 at 09:23

Why the height of the header is not growing while using percentage%?

1 Answers1