CODEWITHSUNDEEP
htmlcss
Kapil gopinath
Kapil gopinath

Reputation: 1053

How can we set parent container height to child containers

I have a parent container with child container's floating inside. All Child have a content section with border. Content section height depends on the content inside it. The requirement is to have the content section with equal heights. As in the sample code container1 and container2 should be of equal heights. In other words all container height should be set with the height of the lengthiest container.

 .clearfix{
   display: flex;
 }

.box {
  float: left;
  width: 43%;
  padding: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
}
.margin-left{margin-left:10px}
.margin-right{margin-right:10px}
.border{border: 1px solid red}
<div class="clearfix">
   <div class="box margin-right" style="background-color:#bbb">
      <h1>
         Header1
      </h1>
      <div class="border">
         <h3>
            Container1
         </h3>
         Some text inside the box.
         Some text inside the box.
         Some text inside the box.
      </div>
   </div>
   <div class="box margin-left" style="background-color:#ccc">
      <h1>
         Header2
      </h1>
      <div  class="border">
         <h3>
            Container2
         </h3>
         Some text inside the box.
      </div>
   </div>
</div>

Upvotes: 2

Views: 1315

Answers (3)

Temani Afif
Temani Afif

Reputation: 273021

You are almost good since you are using flexbox. Do the same inside the each container and consider flex-grow:1 to make the container fill all the space. This solution consider the fact that both title are the same in height:

.clearfix {
  display: flex;
}

.box {
  width: 43%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.margin-left {
  margin-left: 10px
}

.margin-right {
  margin-right: 10px
}

.border {
  border: 1px solid red;
  flex-grow: 1;
}
<div class="clearfix">
  <div class="box margin-right" style="background-color:#bbb">
    <h1>
      Header1
    </h1>
    <div class="border">
      <h3>
        Container1
      </h3>
      Some text inside the box. Some text inside the box. Some text inside the box.
    </div>
  </div>
  <div class="box margin-left" style="background-color:#ccc">
    <h1>
      Header2
    </h1>
    <div class="border">
      <h3>
        Container2
      </h3>
      Some text inside the box.
    </div>
  </div>
</div>

Upvotes: 2

Mehdi Ayari
Mehdi Ayari

Reputation: 548

You can do something like this with Javascript.

Getting the max height of all containers , and change the style height of each element to have equal heights ^^ hope it helps

var divs = document.getElementsByClassName("border");

    var max = 0 ; 

    for (i = 0; i < divs.length; i++) {
      max = Math.max(max , divs[i].clientHeight ) ;
    }

    for (i = 0; i < divs.length; i++) {
      divs[i].style.height = max+"px";
    }
.clearfix{
   display: flex;
 }

.box {
  float: left;
  width: 43%;
  padding: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
}
.margin-left{margin-left:10px}
.margin-right{margin-right:10px}
.border{border: 1px solid red}
<div class="clearfix">
   <div class="box margin-right" style="background-color:#bbb">
      <h1>
         Header1
      </h1>
      <div class="border">
         <h3>
            Container1
         </h3>
         Some text inside the box.
         Some text inside the box.
         Some text inside the box.
      </div>
   </div>
   <div class="box margin-left" style="background-color:#ccc">
      <h1>
         Header2
      </h1>
      <div  class="border">
         <h3>
            Container2
         </h3>
         Some text inside the box.
      </div>
   </div>
   <div class="box margin-left" style="background-color:#ccc">
      <h1>
         Header3
      </h1>
      <div  class="border">
         <h3>
            Container3
         </h3>
         Some text inside the box. Some text inside the box.
 Some text inside the box.
 Some text inside the box.
 Some text inside the box.
 Some text inside the box.
 Some text inside the box.
      </div>
   </div>
</div>

Upvotes: 2

BlueIceDJ
BlueIceDJ

Reputation: 766

You can achieve this with javascript - add this to your code: 

var elements = document.getElementsByClassName('border');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

Or if you prefer jQuery you can achieve it this way: 

$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.border').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.border').height(maxHeight);
});

Note *The float property is ignored in a flex container so you can remove that bit of code.

You might consider using an <article> tag instead of <div> here on your border class. Your text should also be wrapped in a <p> tag.

Upvotes: 2

Related Questions