iframe嵌套页面自适应,CSS如何让iframe实现自适应高度的效果

使用以下样式定义包装类：.resp-container { position: relative; overflow: hidden; padding-top: 56.25%;}position: relative和iframe的位置在这里非常重要。position: relative以便稍后我们可以将iframe与包装元素相关联。这是因为在CSS中，position: absolute基于最接近的非静态父元素定位元素。overflow: hidden 是否隐藏任何可能放在容器外面的元素。padding-top: 56.25%这就是关键所在。在CSS中，padding-top属性可以设置百分比，这使我们的iframe保持正确的比例。通过使用百分比，它将根据元素的宽度计算要使用的填充。在我们的示例中，我们希望保持56.26％的比率，也可以使用其他比率。按如下方式定义iframe类：.resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。top: 0并left: 0用于将iframe定位在容器的中心。width: 100%并且height: 100%使IFRAME采取所有包装的空间。完成后，你应该得到一个响应的iframe。总结：在本文中，我们已经看到了可以让iframe实现自适应高度的技巧。正如您所看到的，它实际上非常简单，希望这篇文章可以给你节省数小时的尝试时间。【相关教程推荐】1、CSS教程2、
是什么？html中iframe标签的用法详解3、CSS在线手册</p><H2 id="HTML教程：如何设置Iframe自适应高度">HTML教程：如何设置Iframe自适应高度</H2> <p>不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 一、程序代码function SetWinHeight(obj){var win=obj;if (document.getElementById){if (win && !window.opera){if (win.contentDocument && win.contentDocument.body.offsetHeight)win.height = win.contentDocument.body.offsetHeight;else if(win.Document && win.Document.body.scrollHeight)win.height = win.Document.body.scrollHeight;}}}最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的win匹配；二、程序代码：我们看看另一种情况的iframe解决方案重要提示：src=中你必须填写的网页地址，一定要和本页面在同一个站点上，否则，会抱错，说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下：1、建立一个bottom.js的文件，然后输入下面的代码；parent.document.all("框架ID名").style.height=document.body.scrollHeight;parent.document.all("框架ID名").style.width=document.body.scrollWidth；2、给你网站里所有的被包含文件里面每个都加入，在WINXP、IE6下面测试通过；实现 iframe 的自适应高度 实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象；程序代码//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["test"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i{if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids);if (dyniframe && !window.opera){dyniframe.style.display="block"if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe.height = dyniframe.contentDocument.body.offsetHeight;else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe.height = dyniframe.Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)tempobj.style.display="block"}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false)else if (window.attachEvent)window.attachEvent("onload", dyniframesize)elsewindow.onload=dyniframesize//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["test"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i{if (document.getElementById){//自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids);if (dyniframe && !window.opera){dyniframe.style.display="block"if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScapedyniframe.height = dyniframe.contentDocument.body.offsetHeight;else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IEdyniframe.height = dyniframe.Document.body.scrollHeight;}}//根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)tempobj.style.display="block"}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false)else if (window.attachEvent)window.attachEvent("onload", dyniframesize)elsewindow.onload=dyniframesize//** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。//定义iframe的IDvar iframeids=["git"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏var iframehide="yes"function dyniframesize(){var dyniframe=new Array()for (i=0; i </p><H2 id="怎么让iframe自适应浏览器的高度和宽度">怎么让iframe自适应浏览器的高度和宽度</H2> <p>宽度可以设置100%但高度用不行了，~ 可以通过jquery获取下父级的高度，赋值给iframe $(ifra<br><iframe scrolling="no" name="aa" frameborder="0" src="bb.html" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)">

iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

　　
700?fdh:700)">

iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

其他地方找来的自适应窗口高度，宽度应该100%就没事了。

先在iframe放一句onload，以便一打开就适应大小

然后添加一段JS代码，就是那个onload事件响应的function

function changeFrameHeight(){

var ifm= document.getElementById("iframepage");

ifm.height=document.documentElement.clientHeight;

}

下面这个也放进JS代码，窗口ReSize事件的时候重新设定高度

window.onresize=function(){

changeFrameHeight();

}

clientHeight是整个窗口可显示内容的高度，如果不止一个iframe或者还有div等容器，可以用clientHeight减掉其他容器的高度。

Win7 IE11测试没问题

您好：

<br>

1、在文件夹里创建两个html文件，一个“index”一个“iframe”。

2、在index中添加一个iframe标签，直接嵌入iframe页面。

3、在iframe网页中添加了两个固定高度的div内容。

4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。

5、现在我们在index页面的iframe标签再添加如下的属性。

6、再次打开index页面iframe已经高度自适应了。
怎么让iframe的大小跟随内容的大小自动调整？

width：可用像素值或百分比) height：可用像素值或百分比 frameborder：内嵌帧边框 marginwidth：帧内文本的左右页边距 marginheight：帧内文本的上下页边距 scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示)
就是iframe的大小自适应 看这里：http://www.blogjava.net/faithwind/archive/2009/03/28/43586.html
怎么让iframe的大小跟随内容的大小自动调整的方法。
如下参考：
1.在一个文件夹中创建两个HTML文件，一个“index”和一个“iframe”。
2.将iframe标记添加到索引中，并将其直接嵌入到iframe页面中。
3.将两个具有固定高度的div内容添加到iframe页面。
4.当浏览器打开索引页时，我们发现在iframe的部分有一个滚动条，需要滚动才能显示页面跟踪。
5.现在，我们将以下属性添加到索引页上的iframe标记。
6.再次打开索引页。iframe对内容的大小具有很强的适应性，如下图所示。

iframe内嵌怎么自适应

那仍然可以用最简单的传统处理方式:
什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。
如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。
Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
主页面代码示例：

附Demo页面： 主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

iframe嵌入网页 且自适应手机？

直接把网站嵌套进iframe就可以了啊，然后iframe的宽设为100vw，高设为100vh，然后边框设置成none就可以了

在

中写上以上2行代码，body里面用iframe，就可以自适应了

如何让iframe里面的内容自适应

假设页面中包含iframe的部分代码如下： 在页面中加入 document.all("test").height=test.document.body.scrollHeight; 自适应宽度类似：在script中加入 document.all("test").width=test.document.body.scrollWidth;

什么命令可以使iframe框架里的被引用页面宽高自适应框架宽高？

这个框架最好不要用。
并不是里页面高度自适是，而是外面的iframe高度自适应你引入的页面的高度。思路是js控制iframe自适应高度，因为iframe本身并不能自适应高度，只有写死高度才行，所以要用js判断整个页面内容的高度。给你的代码:<br>js部分:function defaulIframePageHeight()
{var ifm = document.getElementById("defaulIframePage");var subWeb = document.frames ? document.frames["defaulIframePage"].document : ifm.contentDocument;if (ifm != null && subWeb != null)
{ifm.height = subWeb.body.scrollHeight;}}