有没有办法让 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/