child element occupy the parent height-CodePudding

I have a parent element with min-height and child with height 100%. I want child element to occupy complete height of parent and in case of overflow I want a scroll. Please find the sample fiddle with my requirement.

Fiddle link

.parent {
  min-height: 200px;
  background-color: tomato;
  width: 100%;
}

.child {
  background-color: green;
  color: #fff;
  height: 100%;
}

<div >
  <div >Test child element height</div>
</div>

CodePudding user response：

You can set an height to the child instead and use overfow-y:scroll.

.parent {
  background-color: tomato;
  width: 100%;
}

.child {
  background-color: green;
  color: #fff;
  height: 200px;
  overflow-y:scroll;
}

<div >
  <div >
    Test child element height
    <br><br><br><br><br><br><br><br><br><br><br>
    some text
  </div>
</div>

You can also remove the parent if you don't need it for something else.

CodePudding user response：

I'm not sure if this solution will suit you, but you can do it with jquery:

$('.child').css('height', $('.parent').css('height'));