Currently seeking new career opportunities in web development, particularly with Laravel, Hire Me

iframe set height to 100%

David Carr

CSS Tutorials HTML

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

Laravel Modules Your Logo Your Logo Your Logo

Become a sponsor

Help support the blog so that I can continue creating new content!

Sponsor

My Latest Book

Modular Laravel Book - Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Learn Laravel with Laracasts

Faster Laravel Hosting

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.