HTML | CSS | Tutorials

David Carr

iframe set height to 100%

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

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2009 - 2020 DC Blog. All code MIT license. All rights reserved.