Iframes are useful to loading external pages into an existing page and avoiding any style conflicts, using an iframe is as simple as putting an iframe tag and it’s src. I really wanted the height to be as tall as my viewable screen without setting a fixed height or using javascript. Thanks to a css property called vh (viewport height) it’s a simple process.

First create an iframe:


<pre><code class="lang-php">&lt;iframe src="http://domain.com" frameborder="0"&gt;&lt;/iframe&gt;
</code></pre>
Then style the iframe in css:


<code class="language-css">iframe {
 display:block;
 width:100%;
 height:100vh;
}
```</code>
Clean and supported on modern browsers <a href="http://caniuse.com/#feat=viewport-units">http://caniuse.com/#feat=viewport-units</a>

Iframes are useful to loading external pages into an existing page and avoiding any style conflicts, using an iframe is as simple as putting an iframe tag and it&rsquo;s src. I really wanted the height to be as tall as my viewable screen without setting a fixed height or using javascript. Thanks to a css property called vh (viewport height) it&rsquo;s a simple process.

First create an iframe:


```php
<iframe src="http://domain.com" frameborder="0"></iframe>
```

Then style the iframe in css:


<code class="language-css">iframe {
 display:block;
 width:100%;
 height:100vh;
}
```

Clean and supported on modern browsers&nbsp;<a href="http://caniuse.com/#feat=viewport-units">http://caniuse.com/#feat=viewport-units</a>

iframe set height to 100%

Hi, I’m Dave. A Laravel Developer. I love to build Laravel apps using the TALL stack.


A Laravel and PHP Blog talking about Laravel, Livewire, AlpineJs and related stacks.

DC Blog

DC Blog

iframe set height to 100%