gpt4 book ai didi

javascript - 使 Iframe 高度适合其内容

转载 作者:数据小太阳 更新时间:2023-10-29 06:07:08 25 4
gpt4 key购买 nike

有没有办法让 iframe 的高度适合它的内容?你能告诉我怎么做吗?我尝试在网上搜索和尝试代码,但没有成功

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />

<title></title>

</head>

<body>
<div align="center" style="z-index:1;">
<?php include 'header.html' ?>

<iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>

</div>

</body>

</html>

最佳答案

由于我们处于 CSS3 时代,您可以使用视口(viewport)单位来实现这一点。这些单位允许您根据视口(viewport)宽度和视口(viewport)高度的百分比指定大小。这是用户的视口(viewport),也称为屏幕。但是,在我尝试过的所有主要浏览器中,如果您将 iframe 放在一个 div 中,而该 div 位于另一个 div 中并相对定位,则视口(viewport)单位是相对于此 div 的。由于 100 个视口(viewport)高度单位意味着 100% 高度,您可以这样做:

<div id="parent">
<div id="wrapper" style="position:relative">
<iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
</div>
</div>

我发现这是最好的解决方案,因为它是跨域,并且完全按照您想要的方式显示,没有任何 javascript 或其他复杂的东西。

最重要的是,它适用于所有浏览器,甚至是移动浏览器(已在 android 和 iphone 上测试)!

关于javascript - 使 Iframe 高度适合其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17961006/

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