Ensuring that an iframe is rendered at 100% for both width and height can be a challenge. The method outlined in this Stack Overflow post offers a potential solution.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>While the above code achieves a 100% rendering of the iframe, users may still need to scroll down if there is a header on the website. Ideally, the iframe should adapt to the available space after considering the header. The following example demonstrates this issue:
body, html, main {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }<header>
<h1>My header</h1>
</header>
<main>
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
</main>If you want to render the iframe at 100% without requiring users to scroll down, consider adjusting the code accordingly.