html - Making container of overlapping content fit height of largest child -
html - Making container of overlapping content fit height of largest child -
i'm building carousel/slideshow-type widget rotates between 3 quotes. let's markup looks this:
<div class="carousel"> <blockquote>...</blockquote> <blockquote>...</blockquote> <blockquote>...</blockquote> </div>
i want 3 quotes overlap in place, , i'll transition opacity
property create fade in/out transitions. css looks this:
.carousel{ position: relative; } .carousel blockquote{ position: absolute; top: 0px; left: 0px; }
now if leave @ this, .carousel
div default height
of 0px
, , not force rest of page's content down.
so need specify height, problem each quote can of different length, , result each blockquote
can have different heights.
so question this: how can create sure .carousel
div stretches fit blockquote
biggest height?
i'd prefer pure-css solution, if doesn't exist, elegant js or jquery solution works me well.
here's own answer, using simple jquery loop find out blockquote tallest:
var tallest = 0; $('blockquote').each(function (i, e){ var h = $(e).height(); tallest = h > tallest ? h : tallest; }); $('.carousel').height(tallest);
html css
Comments
Post a Comment