CODEWITHSUNDEEP
javascripthtmlcssangularjs
Jymbo
Jymbo

Reputation: 296

How to expand children div height to parent's height

I have the page structure as:

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

I want to set the height of .child equal to .parent's height (which is known), but without positioning the child absolute. So the result would be a list of children which are themselves as high as the parent.

Upvotes: 0

Views: 1743

Answers (4)

Willem van der Veen
Willem van der Veen

Reputation: 36620

You can use the inherit property to inherit the heigtht of the parent element. Inherit will always take on the same value as the first element where this property is set. For example:

.parent{
  height: 200px;
  width: 600px;
  display: flex;
}


.child1{
  height: inherit;
  width: 25%;
  background-color: green;
}

.child2{
  height: inherit;
    width: 25%;
    background-color: purple;
}

.child3{
  height: inherit;
    width: 25%;
    background-color: blue;
}

.child4{
  height: inherit;
    width: 25%;
    background-color: red;
}
<div class="parent">
   <div class="child1">
   </div>
   <div class="child2">
   </div>
   <div class="child3">
   </div> 
    <div class="child4">
   </div> 
</div>

Upvotes: 0

jas jashim
jas jashim

Reputation: 196

Can use CSS Flexbox to give child elements height of Parent div. 

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

.parent{
display:flex;
}

Upvotes: -1

user3483203
user3483203

Reputation: 51155

You can set the parent's height, and then just set each child's height to 100%, and it will have each child have the same height as the parent, even if that expands the parent.

.parent
.child:nth-child(1) {background-color: #f00;}
.child:nth-child(2) {background-color: #0f0;}
.child:nth-child(3) {background-color: #00f;}

.parent {
  height: 100px;
  background-color: red;
}

.child {
  height: 100%;
}
<div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div> 
</div>

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You may try using table-layout or flex-box, which will make all the children equally high:

.parent {border: 2px solid #ccf; height: 300px;}
.child:nth-child(1) {background-color: #f99;}
.child:nth-child(2) {background-color: #9f9;}
.child:nth-child(3) {background-color: #99f;}

.parent {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}
.parent .child {
  width: 33.3333%;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div> 
</div>

Preview

preview

Upvotes: 0

Related Questions