this is the desired appearance but upon pasting the identical code:
<!-- placeholder div -->
<div style="height:100px;">
</div>
<!-- outer container div (with specified height) -->
<div style="height:80vh;">
<!-- inner div with margin, contained within outer div boundary -->
<div style="height:80vh; padding: 20px;">
<!-- iframe set to occupy entire width and height of its containing div -->
<iframe src="http://insitu-app.com/insitu-tgrg-simplified.html" style="top:0; left:0; height: 100%; width: 100%; margin-left: auto; margin-right: auto; border: none" frameborder="0" allowfullscreen></iframe>
</div>
</div>
after inputting into wordpress code editor and publishing, the resulting display appears like this. The goal is for the div tag and its contents to utilize 80% of the viewport's vertical space. Should this method prove unfeasible on Wordpress, kindly suggest an alternative approach. Thank you in advance.