Zmień wysokość div jednostki nadrzędnej w zależności od bezwzględnej wysokości div div przy użyciu javascript - javascript, jquery, css, html

Pracuję nad projektem, w którym omawiam taką sytuację.

Potrzebuję mojego rodzica div rozciągnąć jego wysokość w zależności od div dziecka. Wysokość nadrzędna jest ustalona na 400 pikseli;

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


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

}

Potrzebuję div mojego dziecka absolute umieszczony.

Div dziecka składa się z zawartości tabeli gdziewysokość może wzrosnąć w zależności od zawartości. Potrzebuję odpowiednio mojego rodzica div odcinka. Potrzebuję więc rozwiązania, w którym obliczana jest renderowana wysokość dziecka i powoduje, że div rodzica jest bardziej rozciągliwy niż dziecko.

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

Jak mam to zrobic?

Odpowiedzi:

0 dla odpowiedzi № 1

Jeśli spróbujesz ustawić szerokość div rodzica na 100%

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

Do

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

Mam nadzieję, że Ci pomoże!

---

0 dla odpowiedzi nr 2

Dodaj ten javascript, ponieważ używasz jquery:

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

Próbny : JSFiddle

---

0 dla odpowiedzi № 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);

});

---