100% height on an iframe/div

Posted on 2006-04-08
Last Modified: 2008-02-26
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!
Question by:salted

    Author Comment

    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.
    LVL 4

    Accepted Solution

    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.

    Author Comment

    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

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now