更改父div高度取决于使用javascript的儿童绝对div高度

Iam正在研究项目，在此类情况下进行拍摄。更改父div高度取决于使用javascript的儿童绝对div高度

我需要我的父母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伸展相应。所以我需要一个解决方案，其中计算出儿童的渲染高度，并使父区段比儿童伸展得更多。

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

我该怎么做？

来源

2014-02-25 user3335843

让我们了解您已经试过表演，我们可以帮你解决这个问题。 –

如果试图父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; 
}

希望帮助你！

来源

2014-02-25 14:08:08 littleswany

我试过了，它没有工作。所以我正在寻找js解决方案。 – user3335843

因为你使用jQuery添加此javascript：

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

演示：JSFiddle

来源

2014-02-25 14:20:32 bprayudha

这实际上工作正常。我应该离开这个$（）。ready（function（），或者我应该添加一些像$（document）.ready（function（）？ – user3335843

不适用于我，我添加了console.log（ch）;在那里无论如何js解决方案我都尝试他们都有这个相同的结果回声“0”。 –

$(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); 

});

来源

2014-08-12 13:35:40 George

更改父div高度取决于使用javascript的儿童绝对div高度

回答

相关问题