Question

我在项目上工作，我在这样的情况下进行了调查。

我需要我的父div根据子div拉伸它的高度。父高度固定为400px;

#parent-div{
min-height:400px;
width:250px;
background-color:#333;
position:relative;
}


#child-div{
position:absolute;
height:auto;
top: 0%;

}

我需要将我的孩子div absolute定位。

子div包含表格内容，其中高度可能会根据内容增加。我需要相应的父div。所以我需要一个asolution，其中计算孩子的渲染高度，并使父div拉伸超过子。

If rendered height of child div is 400px, I need my parent div to be 450px;

我该怎么做？

Answer 1

如果您尝试将父div的宽度设置为100％

#parent-div{
min-height:400px;
width:250px;             <-
background-color:#333;
position:relative;
}

要

#parent-div{
min-height:400px;
width:100%;
background-color:#333;
position:relative;
}

希望能帮到你！

Answer 2

添加此javascript，因为您使用的是jquery：

$().ready(function(){
    ch = $('#child-div').height();
    $('#parent-div').css({
        height : ch + 50 + 'px'
    })
});

演示： JSFiddle

Answer 3

$(function(){
    var parent= $('#parent');
    var parentOffset = parent.offset();
    var bottom = 0; 
    parent.find('*').each(function() {
        var elem = $(this);
        var elemOffset = elem.offset();
        var elemBottom = elemOffset.top + elem.outerHeight(true) - parentOffset.top;
        if (elemBottom > bottom) {
            bottom = elemBottom;
        }
    });

    parent.css('min-height', bottom);

});

使用javascript更改父div高度取决于子绝对div高度

3 个答案: