La altura de mi cuerpo se ajusta al contenido interior con Javascript, y todo mi contenido está en iframes separados que se pueden intercambiar navegando. Mis iframes tienen diferentes alturas, pero cuando la altura es más baja, el cuerpo no se encoge para ajustarse al contenido y mantiene la altura anterior si el contenido es más grande, dejando un espacio. ¿Hay alguna forma de arreglar esto?

 body { width:500px height: fit-content block-size: fit-content } .myDiv { background-color: lightblue; text-align: center; border-radius: 20px; max-width: 500px; align-content: center; margin: auto; } iframe{ overflow:hidden display:block; width:100%; border:0; }

 <div class="myDiv"> <iframe src="1.html" name="one" width="300px" title="Iframe main" scrolling="no" ID="target"></iframe> <a href="content1.html" target="one">01</a><br> <a href="content2.html" target="one">02</a><br> <a href="content3.html" target="one">03</a> </div>

 <script> var div = document.getElementById("target"); div.onload = function() { div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; } </script>