iframe set height to 100%

David Carr

1 min read - 24th Oct, 2015

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:

<iframe src="http://domain.com" frameborder="0"></iframe>

Then style the iframe in css:

iframe { display:block; width:100%; height:100vh; } ```

Clean and supported on modern browsers http://caniuse.com/#feat=viewport-units

0 comments
Add a comment

Copyright © 2006 - 2024 DC Blog - All rights reserved.