The Height Property

HTML-CSS
1

Screenshot%20(49)
Screenshot%20(49)3840Ă—2160 96.1 KB

<html>
<head>
  <style>
    #box-container {
      background: gray;
    }
    #box-1 {
      background-color: dodgerblue;
      width: 25%;
      height: 50%;
    }
  </style>
</head>
<body>
<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
  <div id="box-3">3</div>
  <div id="box-4">4</div>
  <div id="box-5">5</div>
  <div id="box-6">6</div>
</div>
</body>

Why does the height of the blue box occupy more than 50% of its parent div element even if I set it so in the style element?

2

If that’s the full code, then 50% of what? The parent has no height set and, in turn, the body has no height set, so at the minute you’re effectively saying 50% of an unknown value.

3

Doesn’t it take the default value of its parent div container?

4

The default height of the container and body is 0px (and 8px on the HTML because of the default margin on the body).

The blue box should only be the height of its content, unless you have set something on html/body.

2 Likes
5

I don’t understand. Could you give an example?

6

Not sure if this will help
https://codepen.io/anon/pen/eqgJpe

7

The element keep looking up the chain in hierarchy until it’s found something, like in my example on the top when we set #box-1 <div> element’s height to 50% or something, it sets its height to half of body’s height since both its parent <div> and the element’s height is not specifically set. Is my understanding correct?

In the example you’ve provided link to, I understand everything except one thing. The <div> element with the class “div-with-content”, I don’t get how it sets its height to 18.8px.

8

Box-container has not height; box-1 is actually taking the 50% of the <body> because of this; try setting some height for your box-container and you will see it will work .

9

First off, the height of the div will obviously depend on if the text can all fit on one line depending on the screen size.

If it does fit it should be 18px high because of the default font size of 16px plus the default line-height (this might differ depending on the browser, OS, etc.). If you set the line-height to 1 it should be 16px high, i.e. the default font-size.

10

I see, but it seems like the height property doesn’t seem to have any effect on the <div> container. Why?

11

No, as I said in my first reply, because you’re using % units. So you are saying it should be 50% of the parent element’s height. But the parent has no height set, so no dice. So set a height on the parent. If that also is something you want to set in %, then you will need to set height on parent of that and so on. Once you get to the body element, you’ll still need %, but it’ll need to be min-height: 100% otherwise you won’t be able to scroll vertically

12

I see. Thank you for the explanation.