percentage height to child inside of parent element with view port height does not work

user_12887588 0
Viewed 477

i am giving height to parent in viewport as 90vh and height to child element as 90% but this element is not taking up this much area and shows just a line. I am confused as to the parent height,so the child must correspond to this height

<div className="min-h-[80vh]">
  <div className="h-[90%]">test</div>
</div>
reactjs css html
1 Answers

There are two issues preventing your code from doing what you want:

  1. Class names cannot contain certain characters, like percent signs and as user 3in0 mentioned - square brackets which can be confused with the CSS attribute selector.
  2. Percentage heights are based on the parent's height, but not it's min/max height, which are not factored into the calculation. I assume you are using min-height given the classname, so your 90% child height will be 90% of auto (inital/default value). Auto essentially means 'whatever height you need' - 90% of auto = auto.

.min-h-80vh {
  background-color: seagreen;
  height: 80vh;
}

.h-90 {
  background-color: coral;
  height: 90%;
}
<div class="min-h-80vh">
  <div class="h-90">test</div>
</div>

user_141905430
Related