CODEWITHSUNDEEP
htmlcssheight
Karol Selak
Karol Selak

Reputation: 4774

Make child having x% of parent's height set by min-height

My question isn't duplicate of this one, because in my case I use min-height attribute, which works slightly different than common height.

My issue is more advanced version of this one and concerns counterintuitive CSS behavior of min-height attribute. I'd like to set my child's height to 80% of parent's height set by min-height attribute. As shown below, we can set 100% of parent's height by inheriting min-height value, but I cannot do this for smaller percentage. Of course I don't like to set 100px for my child explicitly.

.parent {
  min-height: 100px;
  width: 100%;
  background-color: green;
}
.child {
  width: 30%;
  background-color: blue;
}
#c1 {
  min-height: inherit; /* =100% of parent's height*/
}
#c2 {
  min-height: 80%; /* doesn't work */
}
<div class='parent'>
  <div id='c1' class='child'></div>
</div>
<br>
<div class='parent'>
  <div id='c2' class='child'></div>
</div>

Upvotes: 2

Views: 1443

Answers (1)

Nawaz Ghori
Nawaz Ghori

Reputation: 591

you have to use position: relative to parent and position: absolute to child

.parent {
  min-height: 100px;
  width: 100%;
  background-color: green;
  position: relative;
}

.child {
  width: 30%;
  background-color: blue;
  position: absolute;
}

#c1 {
  min-height: inherit;
  /* =100% of parent's height*/
}

#c2 {
  min-height: 80%;
}
<div class='parent'>
  <div id='c1' class='child'></div>
</div>
<br>
<div class='parent'>
  <div id='c2' class='child'></div>
</div>

Upvotes: 2

Related Questions