Clever Geek Handbook

Create a container with overlapping content to match the height of the largest child

I am creating a carousel / slideshow widget that spins between 3 quotes. Let's say the markup looks like this:

<div class="carousel">
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
</div>

I want the three quotes to overlap in place and I will then traverse their property opacity

to create a transition in / out transitions. My CSS looks something like this:

.carousel{
  position: relative;
}
.carousel blockquote{
  position: absolute;
  top: 0px;
  left: 0px;
}

Now if I leave this the .carousel

default div will be height

from 0px

and will not remove the rest of the page content.

So I need to specify the height, but the problem is that each quote can have a different length and as a result, each blockquote

can have a different height.

So my question is this: how can I make sure the div is .carousel

stretched to fit blockquote

with the largest height?

I would prefer a pure-CSS solution, but if it doesn't exist, an elegant JS or jQuery solution will be generated for me as well.

+3


source to share


4 answers


Here's my own answer, using a simple jQuery loop to find out which blockquote is highest:



  var tallest = 0;
  $('blockquote').each(function (i, e){
    var h = $(e).height();
    tallest =  h > tallest ? h : tallest;
  });
  $('.carousel').height(tallest);
+1


source


It turns out this is possible without JavaScript! All details for Hugo Giraudel to find a solution:

http://codepen.io/HugoGiraudel/pen/d6006e5bb32f13d50d1ab07d6cadbc8f?editors=010



Trick float

all blocks and give them width

100%. Hugo was then able to use margin-left: -100%;

instead of position: absolute

and top: 0px

to overlap them without breaking the layout's normal flow.

Note that the JS code in it is only used to animate the opacity of each block (which can also be done in CSS, but that's another problem), not to set the layout.

+1


source


My guess is that you can end up trying to center each block vertically so that regardless of their size, and even if they overflow the height of the container, they still stay centered?

Using this method is possible: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

0


source


Classic problem and unsolvable without javascript.

If you want to do it without javascript, I think you could use a dirty hack like this: (if you know the width at least ...)

<style>

    .carousel{
      position: relative;
      border: solid 1px #000;
    }
    .carousel blockquote{
        float: left;
        width: 300px;
    }
    .carousel blockquote.next{
        float: left;
        margin-left: -340px;
        width: 300px;
    }

</style>

<div class="carousel">
    <blockquote>...</blockquote>
    <blockquote class="next">...<br>second</blockquote>
    <blockquote class="next">...<br>...<br>third</blockquote>
</div>
0


source






More articles:


All Articles