Cambia l'altezza del genitore in base all'altezza del div assoluto del bambino usando javascript - javascript, jquery, css, html

Sto lavorando a un progetto in cui mi trovo in questa situazione.

Ho bisogno che il mio div div allunghi la sua altezza a seconda del div del bambino. L'altezza del genitore è fissa per 400 px;

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


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

}

Ho bisogno di mio figlio div per essere absolute posizionato.

Il div figlio è costituito dal contenuto della tabella dovel'altezza può aumentare a seconda del contenuto. Ho bisogno che il mio genitore div allunghi di conseguenza. Quindi ho bisogno di una soluzione in cui viene calcolata l'altezza di rendering del bambino e rendere il div genitore allungare in più rispetto al bambino.

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

Come faccio a fare questo?

risposte:

0 per risposta № 1

Se si tenta di impostare la larghezza del div parent su 100%

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

A

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

Spero che ti aiuti!

---

0 per risposta № 2

Aggiungi questo javascript poiché stai usando jquery:

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

Demo: JSFiddle

---

0 per risposta № 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);

});

---