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

Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

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