jQueryUI slider: absolutely positioned element & parent container height

Question

I have an example on http://jsfiddle.net/SsYwH/

In case it don't work

HTML:

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS:

.container {
    background: green;
}
.absolute {
    position: absolute;
    background: red;
}

Problem

I use jQuery to create a slider-effect. To do that I need to set position absolute.

• The red block in my code is the position absolute slider.
• The green block is the container.

I still want the container to be set by it's childs height. Now it don't know it because of the position absolute. Solution?

Answer 1

Absolutely positioned elements do not count towards the container's contents in terms of flow and sizing. Once you position something absolutely, it will be as if it didn't exist as far as the container's concerned, so there's no way for the container to "get information" from the child through CSS.

If you must allow for your scroller to have a height determined by its child elements without Javascript, your only choice may be to use relative positioning.

Answer 2

Then you'll also need to use jQuery to fix the height of the container div. Like so:

http://jsfiddle.net/khalifah/SsYwH/24/

$( document ).ready(function() {
    $( ".container" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

This is wrong however, since an absolute positioned element can sit outside of it's container. What you really what is something that will find the bottom of the element that sits lowest in the containing div, with respect to the view.

Answer 3

jQuery('.container > .absolute').each(function() {
    jQuery(this).parent().height('+=' + jQuery(this).height());
    jQuery(this).css('position', 'absolute');
});

.container {
    background: green;
    position: relative;
}
.absolute {
    position: absolute;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
    Yo
</div>

This should do what you are wanting. Note that this assumes that the absolutely positioned element must be an immediate child.

Also note that you remove the '+=' + in the height function if you want the parent element to have 100% height of it's child element.

http://jsfiddle.net/SsYwH/21/

Answer 4

You can do something like this with jquery. Call ghoape(jqueryElement).

var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
    var max_y = 0;
    $.each( $(element).find('*'), function(idx, desc){
        max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );

    });

    return max_y - $(element).offset().top; 
}

This will go through all the descendants and find the max height and return the difference between the childs.offset() + its height and then subtract that from the elements offset.