I am facing an unusual issue with the CSS property vh (viewpoint height), causing my iframe to expand uncontrollably. To explain, within my iframe code, I have the following:
function sendPost() {
setInterval(function(){
try {
let adjust_height = document.body.offsetHeight || document.body.clientHeight;
parent.postMessage( JSON.stringify({ command: 'adjust_height', height: adjust_height}), '*');
} catch(e) {
console.error(e);
}
}, 3000);
}
In short, every 3 seconds, I send the new content height inside the iframe to its parent, which then adjusts the iframe height accordingly to fit the content without scrolling. It works perfectly! If I include something like this:
#mainContainer {
min-height: 75vh;
}
The HTML inside the iframe can be as simple as:
<html>
<body>
<div id="mainContainer"></div>
</body>
</html>
However, this causes the mainContainer to constantly increase in size. For example:
//1st Interval Height is 500
let adjust_height = document.body.offsetHeight || document.body.clientHeight;
//2nd Interval Height is 700
let adjust_height = document.body.offsetHeight || document.body.clientHeight;
//3rd Interval Height is 900
let adjust_height = document.body.offsetHeight || document.body.clientHeight;
When I remove the VH css property, the height no longer grows endlessly. Why does using VH affect the document height within an iframe?