CSS - How to Have Children in Different Parents the Same Height

CSS - How to have children in different parents the same height?

To be able to accomplish that without using script, all the items (h2,p,p,ul) needs to see each other, which technically mean they need to be siblings.

And then, for wider screens where they sit side-by-side, they need to be reordered, where the h2 comes first (order: 0) and so on.

I used one media query, but you might want to add more, to match more of Boostrap's break points.

To add i.e. an outer border, you need to use a combination of border-top/border-left/border-right/border-bottom on the elements, which also need to be altered with the query's, to cover both horizontally and vertically stacked items.

Updated codepen

@media (min-width: 768px) {    .content {    display: flex;    flex-wrap: wrap;    justify-content: space-around;  }
  .content > * {    flex-basis: calc(50% - 30px);  }
  .content h2 {                     /*  1st row  */    order: 0;  }  .content p {                      /*  2nd row  */    order: 1;  }  .content p + p {                  /*  3rd row  */    order: 2;    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,                                       or add an extra empty in the markup  */  }  .content ul {                     /*  4th row  */    order: 3;  }  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="light-grey-section ruler">  <div class="container">    <div class="row">      <div class="light-section col-xs-12">                <div class="content">          <h2>Lorem ipsum Lorem ipsum</h2>          <p>            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren          </p>          <p>            Lorem ipsum dolor          </p>          <ul class="check">            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>          </ul>          <h2>Lorem ipsum</h2>          <p>            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor          </p>          <ul class="check">            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>            <li>Lorem ipsum dolor sit amet,</li>          </ul>        </div>              </div>    </div>  </div></div>

Same height siblings based on parent's size

You can use display: flex

Basically, this allows you to tell child elements how much height/width it can take up.

In the snippet below, we have 3 children. We can assign a flex to each child.

The flex for each child means how much of its parent should that particular child take up. In my example they all have a flex of 1 meaning that they each take up 1/3 of the parent's height.

Child1 - 1

Child2 - 1

Child3 - 1

However if we had something like this:

Child1 - 1

Child2 - 2

Child3 - 3

Then we have something different. In this case, Child1 is taking up 1/6 of the parent's height, Child2 is taking up 2/6 (1/3) of the parent's height, and Child3 is taking up 3/6 (1/2) of the parent's height. This is basically how flex works.

Lastly, flex has a default direction, meaning that it automatically will fill the width (rows) based on the flex values, not the height (columns). So to tell flex to display in columns you need to use flex-direction: column; to order/"squish" by height.

.parent {  width: 200px;  height: 180px;  display: flex;  flex-direction: column;}
.child1 {  background: red;  width: 100%;  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */}
.child2 {  background: green;  width: 100%;  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */}
.child3 {  background: blue;  width: 100%;  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */}

<div class="parent">  <div class="child1"></div>  <div class="child2"></div>  <div class="child3"></div></div>

How to make a child div same height as parent and make its width equal its height?

If you can use modern CSS, you can use

height: 100%;
aspect-ratio: 1;

on your child to force it into being a square.

(aspect-ratio is supported by 80% of users and all major browsers)

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

Equal height of children of unrelated parents

In the case that they can't be placed inside a wrapper you can make use of a sorting from lowest to heighest and apply the heighest value to all affected nodes and a MutationObserver to easily monitor changes on these nodes to call the height-adjust routine again.

For equal height of parents:

$(document).ready(() => {
  const selector = ".containers";
  function resize() {
    const nodes = $(selector)
          .css("height", "auto")
          .sort((a, b) => $(a).height() - $(b).height()),
      heighest = nodes.last().height();
    if (nodes.first().height() != heighest)
      $(selector).css(`height`, `${heighest}px`);
  }

  resize();

  const observer = new MutationObserver(resize);
  $(selector).each((idx, el) => observer.observe(el, { childList: true, subtree: true }));


  // Examples:
  setTimeout(() => {
    $(".columns").first().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 1500);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 3000);
  setTimeout(() => {
    $(".columns").last().append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet");
  }, 5000);
})

.containers {
  border: 1px solid;
  width: 100%;
  display: inline-block;
}

.columns {
  border: 1px solid red;
  padding: 20px;
  min-width: 20%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
  <div class="columns">This is<br>the highest<br>column</div>
  <div class="columns">One line</div>
  <div class="columns">Four<br>lines<br>the highest<br>column</div>
</div>
<div class="containers">
  <div class="columns">One line</div>
  <div class="columns">Two<br>lines</div>
  <div class="columns">One line</div>
</div>

Align child elements of different blocks

This is not possible at present (2019/06)* with any CSS layout method.

display:subgrid solves the issue but it has limited non-experimental adoption by browsers as yet.*

*[2019/12 Update] - Subgrid is now shipped in Firefox 71

Support @ CanIuse.com

It is enabled, by default, in Firefox 71+ so it is possible to test. Until this is fully adopted Javacript is needed to equalise element heights.

A couple of resources links from Rachel Andrew (a CSS-Grid envangalist)

https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

and

YouTube video on subgrid
And Another

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }
.Grid {  display: grid;  width:90%;  margin:auto;  grid-gap: 10px;  grid-template-columns: repeat( auto-fill, 280px);}
.loon-card {  display:grid;  grid-row: span 5; /* as we have 5 card components in each card */  grid-template-rows:subgrid;  border: 1px solid #ddd;  padding: 10px;}
.long-description {  border-top: 1px solid #ddd;}
.price {padding:.5em;text-align:center;}
img {  max-width:100%;  display: block;}

<div class="Grid">
  <div class="loon-card">    <img src="http://www.fillmurray.com/300/200">    <div class="short-description">      Title:1      <br/>Title:2      <br/>Title:3      <br/>Title:4    </div>    <div class="long-description">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.    </div>    <div class='price'>12.00$</div>    <button>buy</button>  </div>
  <div class="loon-card">    <img src="http://www.fillmurray.com/300/200">    <div class="short-description">      Title:1      <br/>Title:2      <br/>Title:3      <br/>Title:4      <br/>Title:5      <br/>Title:6
    </div>    <div class="long-description">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.    </div>    <div class='price'>12.00$</div>    <button>buy</button>  </div>
  <div class="loon-card">    <img src="http://www.fillmurray.com/300/200">    <div class="short-description">      Title:1      <br/>Title:2      <br/>Title:3      <br/>Title:4    </div>    <div class="long-description">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.    </div>    <div class='price'>14.00$</div>    <button>buy</button>  </div>
  <div class="loon-card">    <img src="http://www.fillmurray.com/300/200">    <div class="short-description">      Title:1      <br/>Title:2      <br/>Title:3      <br/>Title:4    </div>    <div class="long-description">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.    </div>    <div class='price'>15.00$</div>    <button>buy</button>  </div>
</div>

Why parent and children divs have the same height

That's because you have given your .App a full screen height (100vh) and made your category__list again 100% height. So your footer resides below it. This is why you get the scroll.

If you need your app to be full screen height then maybe this will help you.

    .App {
      height: 100vh;
    }

    .category__list {
      margin: 0;
      height: calc(100% - 150px); /* footer height reduced from full height*/
    }

    .page-footer {
        padding: 0;
        height: 150px;
    }

How to expand children div height to parent's height

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>

How to make child divs same height as flex parent

The child elements of a display: flex; element will take up the height of the parent by default. So no need for height: 100%; or similar.

div#filterRow {  min-height: 80px;  display: flex;  border: 2px solid red;}
div#filterRow div.selectHolder {  border: 2px solid blue;  border-right: 0;  padding: 10px;}
div#filterRow div.selectHolder div {  vertical-align: top;}
div#filterRow div.selectHolder:last-child {  border-right: 1px solid lightgray;}
div#filterRow div h1 {  margin: 0;  margin-bottom: 10px;}
div#filterRow div div {  margin-right: 5px;}
div#filterRow div#filters {  width: 800px;}
div#filterRow div#highlight {  width: 300px;}
div#filterRow div#granularity {  width: 400px;}
div.fullwidth {  width: 100%;}

<div class="dispTR" id="filterRow">
  <div class="selectHolder" id="filters">    <h2>Filters longer to make tall</h2>    <p>      Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel.    </p>  </div>  <div class="selectHolder" id="highlight">    <h2>Highlight</h2>  </div>  <div class="selectHolder" id="granularity">    <h2>Group</h2>  </div>  </div>

CSS - How to Have Children in Different Parents the Same Height