My issue arises from the fact that my body height does not adjust to the content inside the iframes when using Javascript. Each iframe contains different content and heights, causing gaps in the layout if one iframe is smaller than the others. Is there a way to resolve this inconsistency?
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>