How to make child div to be 100% height of position absolute parent container

Question

How to make child div to be 100% height of position absolute fixed parent container?

HTML

<div class="parent">
  <div class="child">
  </div>
</div> 

CSS

.parent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

Answer 1

An idea is to make the parent element flex container so the child element will be stretched by default:

 .parent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid red; display: flex; } .child { background: blue; }

 <div class="parent"> <div class="child"> text </div> </div>

Answer 2

It's really simple: JSFiddle

You just add a 100% height to your child div . To show that it really works, I changed the top and bottom of the parent div so that you can see that the child is 100% of its parent.

.parent {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 25px;
  left: 0;
  background: steelblue;
}

.child {
  height: 100%;
  width: 50%;
  background: pink;
}

Answer 3

Use 100% height with child div, Like

.Child{
height:100%;
}

Answer 4

You should just be able to add a height of 100% .

 .parent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #eee; } .child { width: 100px; height: 100%; background-color: blue; }

 <div class="parent"> <div class="child"> </div> </div>

Answer 5

Give position absolute to child also, and height 100%;

.child {
position:absolute;
height: 100%;

}

but in case you dont want to make child absolute then give it postion relative and height 100%;

.child {
position:relative;
height: 100%;

}

Simple.
I can give you running example if you want.

Answer 6

Here is an alternative:

Use position: relative on parent and height: 100% on child

<div class="parent">
  <div class="child">
    child
  </div>
</div>

.parent {
  position: relative;  
}
.child {
  position: absolute;
  height: 100%;  
}

Here is a codepen demo

Answer 7

you should give 100vh height to child div like

.child{
 height:100vh;
}