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?

Yeah, absolutely positioned elements break out of the normal flow so that they can be "absolutely" positioned. To have them affect the flow of other elements would defy or redefined what absolute position currently means. Although I think at some point and time, we've all wanted to have an absolutely position element to at least cause it's container to keep its height. It's kind of ironic. — b01, Sep 06 '11 at 16:31
Using jQueryUI slider effect might be the problem, this effect can be fairly easily achieved using jQueryUI animate effect: leave the `position: relative` & change margin-left value using animate such as `$(".sliding-element").animate({ marginLeft:'400px' }, 500);` — Adrien Be, Apr 09 '14 at 13:00

score 24 · Answer 1 · answered Sep 06 '11 at 14:18

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.

b01 · Accepted Answer · 2011-09-06T16:40:36.623

7

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.

edited Sep 06 '11 at 16:40

answered Sep 06 '11 at 14:23

b01

3,476
1
21
26

8

Wish someone would supply a nice easy CSS solution to this problem. – b01 Sep 06 '11 at 16:25
1

Depending on your problem's constraints, http://stackoverflow.com/a/18963170/1347604 might be acceptable as a CSS solution. It handles height just fine, but be aware it ignores widths. – Jasmine Hegman Jan 18 '14 at 01:12

score 5 · Answer 3 · edited Apr 19 '16 at 18:27

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/

Leon · Answer 4 · 2013-12-26T21:21:16.037

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.

jQueryUI slider: absolutely positioned element & parent container height

4 Answers4

Linked