[Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 573
  • Last Modified:

100% height on an iframe/div

I'd like an iframe (which is inside a div) to take up all the available space, vertically, in the browser window. Here's the HTML:

<div id="detail">
      <iframe width="100%" height="100%" src="images/bigpic.jpg"></iframe>
</div> <!-- detail -->

All applicable CSS that's being applied is below:

#detail {
background-color: #f0f0f0;
clear: both;

#detail iframe {
margin: 15px;
width: 95%;
clear: both;
height: 100%;

I'm not sure if this is possible? I'm happy to use Javascript if that's what's required. Thanks in advance!
  • 2
1 Solution
saltedAuthor Commented:
I have just realised that the contents of the iframe (an image) could just as easily be in a div with overflow:scroll, so the iframe could be removed altogether. If that's easier, then I just need an answer for how to get a div to take up as much of the browser's height as is available.
You need to set the div's containing element , and it's parent element(s) to have 100% height as well, including the html and body elements.
saltedAuthor Commented:
Thanks for the response. I actually tried that and it didn't work for me (I saw that answer after a Google search).

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now