CODEWITHSUNDEEP
javascriptjquerycss
John Ohara
John Ohara

Reputation: 2901

Parent Div to Keep the Height of Tallest Child

I've been Googling potential solutions but as yet cannot find one that fits the brief.

<div class="parent">
    <div class="child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="child2">I'm 80px tall and hidden until needed</div>
    <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

I'll use jQuery to change the css of the visible child but I'd prefer a CSS solution to the height if possible.

No IE8/9/10 to support.

Anyone got ideas?

Upvotes: 3

Views: 1710

Answers (2)

pblyt
pblyt

Reputation: 518

Hope this is what you want:

  1. Use flex display to arrange the child as column display.
  2. Set their opacity as 0 so that the child element still remain in the parent div, this will set the parent height the same as the tallest child.
  3. Created a new class visible to style the visible child, and set default children (which are hidden) width: 0px while visible child will have width: 100%

function show(element) {
  $('.parent div').removeClass('visible');
  $('.' + element).addClass('visible');
}
.parent {
  border: 1px dashed #000;
  display: flex;
}

.child1 {
  height: 60px;
  background: red;
}

.child2 {
  height: 80px;
  background: yellow;
}

.child3 {
  height: 100px;
  background: orange;
}

.parent div {
  opacity: 0;
  width: 0px;
}

.parent div.visible {
  opacity: 1;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div>
  <div class="child2">I'm 80px tall and hidden until needed</div>
  <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

<br/>
<button onclick="show('child1')">Child 1</button>
<button onclick="show('child2')">Child 2</button>
<button onclick="show('child3')">Child 3</button>

Upvotes: 3

Moin Zaman
Moin Zaman

Reputation: 25445

hide using opacity with 0 and 1 and the parent should be as tall as the tallest child.

See snippet below

$(function(){ 
  $(".c").fadeTo(0,0);
  $(".child1").fadeTo(0,1).addClass("visible");
  $(".btn").click(function(){
    $(".c").fadeTo(0,0);
    $(".visible").removeClass("visible").next().fadeTo(0,1).addClass("visible");
  });

});
.parent { position:relative; border:2px solid red; display:flex  }
.c { border:2px solid blue; }
.child1 { height:60px; }
.child2 { height:80px; }
.child3 { height:100px; }
<div class="parent">
    <div class="c child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="c child2">I'm 80px tall and hidden until needed</div>
    <div class="c child3">I'm 100px tall and hidden until needed</div>
</div>

<button class="btn">Show Next Child</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions