Question

这是一个阻碍我成就和幸福的简单问题。

我网站的父级：必须不才是确切的高度。

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

iFrame_Holder Div：也不能是精确的高度。

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

HTML：（Src .html页面将相对定位，具有不同的页面高度。）

<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>

现在，如果父div必须具有特定的高度而不是百分比，我的Iframe的各种大小的页面如何显示而没有尴尬的额外空间或被切断？

诀窍和感谢你的帮助。

Answer 1

您可以使用css3媒体查询：

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

另一个解决方案是替换：height：继承iframe

更好的解决方案是使用JavaScript来获取窗口的高度。

如何获得我的网站的高度以适应各种大小的iframe页面？

1 个答案: