让绝对父母调整孩子的高度

Question

我动态地 $.append()ing <div>s 到 position:absolute 父母。

我在另一个带有$.animate({dimension: 'show') 的<div> 的悬停上显示absolute 父级。

absolute 父级不会增加其'height 而$.append()ing。

如何使absolute 父级的height 等于所有子级？

http://jsfiddle.net/ZDfCv/3/

在本例中，在datepicker 的日期为selected 或月/年changed 之后，子代为$.append()ed。

html

<div id="hoverAnchor" class="regularBorder">hover me</div>
<div id="hoverMe" class="outerBorder" style="display:none; position:absolute;">arbitrary text
    <div id="dateSelector"></div>
</div>
<div id="cloneMe" class="regularBorder" style="display:none">i have been cloned</div>

css

.regularBorder{
    border: 1px solid black;
}
.outerBorder{
    border: 2px solid red;
}

js

$(document).ready(function () {
    $("#hoverMe").position({
        of: $("#hoverAnchor"),
        my: "left top",
        at: "left bottom",
        collision: "fit none"
    });

    $.fn.appendGridSort = function(){
        var $myClone = $('#cloneMe').clone(false);
        $myClone.prop('id', null).prop('style',null);
        $("#hoverMe").append($myClone);
        $myClone.animate({
            height:'show',
            width:'show',
            opacity:'show'
        });
    }

    $("#dateSelector").datepicker({
        changeMonth: true,
        changeYear: true,  
        onChangeMonthYear: function(){
            $.fn.appendGridSort();
        },
        onSelect: function(){
            $.fn.appendGridSort();
        }
    });
    var _enter = false;
    $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
        if (!_enter) {
            $("#hoverMe").stop(true, false).animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 200);
        }
        _enter = true;
    }).mouseleave(function () {
        _enter = false;
        $("#hoverMe").stop(true, false).animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 200);
    });
});

Answer 1

将$("#hoverMe").css('height','auto'); 添加到您的$.fn.appendGridSort 函数中：

$.fn.appendGridSort = function(){
    var $myClone = $('#cloneMe').clone(false);
    $myClone.prop('id', null).prop('style',null);
    $("#hoverMe").append($myClone);
    $myClone.animate({
        height:'show',
        width:'show',
        opacity:'show'
    });
    $("#hoverMe").css('height','auto');
}