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.

4

1 回答 1

1

您可以使用 css3 媒体查询：

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

另一种解决方案是替换：height:inherit for iframe

另一个解决方案是使用 JavaScript 来获取窗口的高度。

于 2012-06-14T11:20:39.260 回答