How to set height in percentage using css

Asked

Viewed 283 times

0

Is there any way to define height:80% 80% being the size of the div that it occupies on the CSS screen?

class="wrapper" style="height: 80%;">
css

1 answer

6


To use measurements relative to the displayed area, use vw and vh.

See that the example in yellow is related to the area of the frame (viewport width and viewport height).

Click on whole page right in the corner of snippet and compare.

If you use a percentage, the element is relative to the upper div, provided that the position of the upper div is not fixed or absolute (the inner one can even have an absolute position). This is the example in red, 80% of the height of the yellow div, and half the width.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}
<div id="d1">
  <div id="d2">
  </div>
</div>

For a comparison between multiple units of CSS measurement, see these posts:

Why it is recommended to use the "em" unit instead of "px" for fonts?

What are the differences between the "vw", "em" and "%"?

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.