gpt4 book ai didi

HTML iframe最大高度,高度:100% not working

转载 作者:太空宇宙 更新时间:2023-11-04 02:33:18 27 4
gpt4 key购买 nike

我想设置 iframe 的高度以扩展到可用空间的其余部分(即 windowsHeight - menuHeight - footerHeight),如 contentFrame 中所用,这对我不起作用。当高度设置为特定像素时有效。宽度:100% 有效。由于该应用是旧版应用,因此它应该与 IE 10/11、Chrome 和 Firefox 兼容。

索引.htm

<body>
<iframe name="menuFrame" src="menu.htm" frameborder="1" style="height:40px; width: 100%;">
</iframe>
<iframe name="contentFrame" src="content.htm" frameborder="1" style="height:100%; width: 100%;">
</iframe>
<iframe name="footerFrame" src="footer.htm" frameborder="1" style="height:15px; width: 100%;">
</iframe>
</body>

菜单.htm

<body>
menu
</body>

内容.htm

<body style="border: solid 1 black;height: 100%;">
content
</body>

页脚.htm

<body>
footer
</body>

更新感谢你的帮助。我只测试了 LGSon 的,这对我来说更容易理解。

最佳答案

方法如下:

您必须确保将 width 添加到您的 iframe。此外,最好将其设置为 display:block; iframe 的值。

100% 高度和 100% 宽度 iframe 内联示例:

<iframe src="PLACE_YOUR_URL_THERE.html" height="100%" width="100%" style="display: block;" />

当然,如果可能的话,最好的方法总是通过 CSS 来设置它。但两者都有效。

注意:在您的 CSS 中,添加此属性:

html, body{
height: 100%;
}

所以你要确保你的 body 和 html 标签占据当前视口(viewport)高度的 100%

关于HTML iframe最大高度,高度:100% not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36132416/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com