Tengo un div A, que contiene div B, que contiene div C, que contiene div D, donde div A tiene una altura predeterminada de 40 px. Es algo como abajo.
<div id='A' style="height: 40px"> <div id='B'> <div id='C'> <div id='D'></div> </div> </div> </div>La cuestión es que div C se implementa de manera que puede cambiar dinámicamente la altura. Por lo tanto, podría exceder la altura predeterminada de div A (40 px) y causar algún problema cosmético.
Lo que quiero lograr es mantener la altura del div A en 40 px, siempre que la altura de cualquier div secundario no supere los 40 px. Sin embargo, si la altura de cualquier div secundario supera los 40 px, quiero que la altura del div secundario anule la altura del div A. Por ejemplo, cuando div C cambia la altura a 80 px, quiero que la altura de div A sea de 80 px.
Me pregunto si necesito escribir un método para calcular dinámicamente la altura de cada división secundaria y hacer algo como getElementById('A').style.height = null si la altura secundaria devuelta es mayor que 40px.
¿Hay una manera mejor o más simple de hacer eso?
Intenta usar 'min-height'.
min-height: 40px;Según mi punto, no es necesario que verifique la altura de cada elemento secundario.
Si marca la altura del elemento secundario B es más que suficiente, porque ese es el elemento principal para el elemento secundario C y D
De acuerdo con eso, seguir el código JS le proporcionará la solución.
// get parent div #A var parentElement = document.getElementById('A'); // parent div #A initialHeight var parentDivOffsetHeight = 40; // no need to mentionion px // get child div #B offest height var childDivOffsetHeight = document.getElementById('B').offsetHeight; // check if child div height is greater than parent div or not if(childDivOffsetHeight > parentDivOffsetHeight){ //set child div height to parent div parentElement.style.height = childDivOffsetHeight+'px'; }Violín JS relacionado: https://jsfiddle.net/katheer_mizal/3ouypevd/18/
Para verificar las alturas de los elementos, puede usar las siguientes formas
clientHeight incluye relleno.
var clientHeight = document.getElementById('B').clientHeight;offsetHeight incluye relleno, barra de desplazamiento y bordes.
var offsetHeight = document.getElementById('B').offsetHeight;.style.height igual a $('#content').css('height'.
var offsetHeight = document.getElementById('B').style.height;