Altere Parent div Height dependendo da altura div absoluta do filho usando javascript - javascript, jquery, css, html

Eu estou trabalhando em projeto onde eu cam em toda a situação como esta.

Eu preciso que meu pai div estenda sua altura dependendo da div infantil. A altura pai é fixa para 400px;

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


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

}

Eu preciso que meu filho div seja absolute posicionado.

A div filha consiste no conteúdo da tabela ondea altura pode aumentar dependendo do conteúdo. Eu preciso do meu pai div esticar de acordo. Então, eu preciso de uma solução em que a altura processada do filho seja calculada e faça com que o div pai seja estendido além do filho.

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

Como eu faço isso?

Respostas:

0 para resposta № 1

Se você tentar definir a largura do div pai para 100%

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

Para

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

Espero que ajude você!

---

0 para resposta № 2

Adicione este javascript desde que você está usando jquery:

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

Demonstração: JSFiddle

---

0 para resposta № 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);

});

---