CODEWITHSUNDEEP
htmlcss
jdw
jdw

Reputation: 4115

When you set <div> height to 100%, what is technically happening to the other content on the page?

Beginner trying to understand the height property. Let's say I start with the following basic css and html, setting the hight of the .hero div to 100%:

html,
body {
  height: 100%;
  margin: 0px;
  text-transform: uppercase;
}
.hero {
  height: 100%;
  background-color: blue;
  text-align: center;
  color: #FFF;
}
.normal {
  background-color: red;
  text-align: center;
}
h1,
h2 {
  margin: 0px;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="hero">
    <h1>100% Heroic</h1>
  </div>
  <div class="normal">
    <h2>Normal Div</h2>
  </div>
</body>

</html>

So there are a couple of things that I don't understand here:

  1. What does it mean to set <html> height to 100%? As the root element, how is its height calculated? MDN says: "A percentage height on the root element is relative to the initial containing block." However, I have no idea what the "initial containing block" would be for the <html> element.

  2. So in the snippet above, I have set <html>, <body> and .hero to 100%. As I understand it, height is calculated with reference to the parent (except for the wrinkle specified in item 1 above). So if the .hero div is taking up 100% of <body>, how is there room left over for the .normal div? Does <body> automatically expand? If so, does this mean height: 100% with respect to .hero just means "This class will take up as much of the parent element as possible, but if there's more content in the parent, we'll have to make a little room for it as well." In other words, not quite 100%?

Any help understanding these concepts would be appreciated!!

Upvotes: 1

Views: 106

Answers (2)

apaul
apaul

Reputation: 16170

If your using percent to measure something it is nearly always in respect to something else right?

The easiest way to think about height:100%; is to start with the window and work your way in.

enter image description here

Now in the above example, if the height of each of element is set to 100%. Each element will be the full height of the window.

If you you have Element-Overflow pun intended, as in elements are being pushed down due to the height of the elements above them. That does not change the height of the body, html or whatever parent element. The best way to see that is with a border and/or overflow:hidden;:

html, body{
  height:100%;
  padding:0;
  margin:0;
  /*overflow:hidden; add and remove overflow to see what I'm talking about*/
  border:2px solid red;
  }

.hero{
  height:100%;
  }
h1{
  margin:0;
  padding:0;
  }
<div class="hero">
    <h1>100% Heroic</h1>
  </div>
  <div class="normal">
    <h2>Normal Div</h2>
  </div>

So the height isn't really going over 100% you just have some overflow. Note that the body, html, and #hero are still only as tall as the window.

Upvotes: 2

Becandoo
Becandoo

Reputation: 86

The body tag can be set to 100% so any styles applied to that parent tag will be applied at a height of 100% (i.e a background-color/image). If there is other content on the page, the content will take up it's own space and the body element will adjust as needed.Essentially, when an element is set to a height of 100% it will take up 100% of allotted space, in respect to other elements on the page. Hopefully this helps answer your question.

If there is no other content or no parent element, the browser window is used to determine the height/width.

Upvotes: 0

Related Questions