2

It's such a simple issue blocking me from accomplishment and happiness.

The Parent Div of my site: Must not be an exact height.

#Container {
    position:relative;
    margin-right: auto;
    margin-left: auto;
    width: 993px;
    **height: 100%;**
}

The iFrame_Holder Div: Also must not be an exact height.

#iframe_holder {
    position: relative;
    width: 993px;
    height: 100%;
}

The HTML: (Src .html pages will be relatively positioned with various page heights.)

<html>
    <body>
        <div id="Container">
            <div id="iframe_holder">
                <iframe width="933" height="100%"frameborder="0" Scrolling="no" src="About.html"> </iframe>
            </div>
        </div>
    </body>
</html>

Now if the parent div must have a specific hight rather than percentage how will my Iframe's various sized pages get displayed without awkward extra space or being cut off?

What the trick and thanks for your help.

Daedalus
  • 7,586
  • 5
  • 36
  • 61
Clyde
  • 39
  • 1
  • 5
  • 2
    I may have missed it in your explanation, but what is up with the stars? – Daedalus Jun 02 '12 at 23:43
  • Google for "dynamic Iframe height" or have a look at for example http://stackoverflow.com/questions/3913167/iframe-dynamic-height-width-change-based-on-inner-content. The approach will depend on whether you're displaying content through the Iframe from a domain you control or not. – Tom Jun 03 '12 at 00:29
  • Finally i can comment sorry, did extensive research into iframes and found two working methods as for FF & Safari (IE tested good using adobe's browser lab until I can check on a PC.) Which would you depend on? 1. http://www.dynamicdrive.com/dynamicindex17/iframessi.htm or the much shorter one provided in the bottom of this form post: http://www.codingforums.com/archive/index.php/t-220661.html Thanks ! – Clyde Jun 03 '12 at 08:29

1 Answers1

1

You can use the css3 media queries : 

@media screen and (height: 640px){
  #iframe_holder{height:120px;}
}

A other solution is to replace: height: inherit for the iframe

A ohter solution is to use JavaScript to get the height of the window.

bonTuyau
  • 13
  • 5