iframe html高度自适应,CSS实现iframe高度自适应示例

高度自适应的实现方法有不少了，今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子，有兴趣的可以和小编一起来看看。

前因：某个项目为了统计效果，把咨询的页面窗口内嵌放进一个单独的空页面，在这个页面里加了个统计，让人看着这个页面就跟直接进入咨询页面一样，懒得折腾啥js，直接用css弄了下，还好需求也不太高。OK了吧。

后果：因为接触iframe很少，几乎就没用过，所以当时就谷歌、百度了下，也不记得当时都搜到了些啥个内容，反正需求也不太强，就直接用css解决了

HTML>      页面内嵌iframe设置宽高度为100% | 格桑的blog

目测貌似把table去掉也是可以滴，没有测试过的哦。

下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。

注意别放错地方了哦。

iframe代码，注意要写ID

  jquery代码１：  //注意：下面的代码是放在test.html调用  $(window.parent.document).find("#main").load(function(){  var main = $(window.parent.document).find("#main");  var thisheight = $(document).height() 30;  main.height(thisheight);  });

jquery代码２：

//注意：下面的代码是放在和iframe同一个页面调用    $("#main").load(function(){    var mainheight = $(this).contents().find("body").height() 30;    $(this).height(mainheight);    });

HTML代码：

  Javascript代码：

iframe html高度自适应,CSS实现iframe高度自适应示例相关推荐

css浮动布局自适应,CSS 几种常用自适应布局
通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错.谢谢我理解的[两列布局]左边固定和右边自适应,或者右边固定左边自适应的原理是: 1.设置固定区域的宽度 ...
纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...
纯css实现iframe高度自适应
当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页,但是用iframe标签引入视频最大的一个问题就是无法自适应高度,宽度不是什么大问题,只有我们在iframe标签中加入width ...
css 控制div高度自适应浏览器的高度
css 控制div高度自适应浏览器的高度 1 <html> 2 <head> 3 <style> 4 #myTable{height:100%;border:sol ...
iframe在ie和firefox中的高度兼容性问题解决
iframe在ie和firefox中的高度兼容性问题解决参考文章: (1)iframe在ie和firefox中的高度兼容性问题解决 (2)https://www.cnblogs.com/haore1 ...
CSS百分比实现高度占位自适应
[CSS黑科技2]CSS百分比实现高度占位自适应(margin/padding) |导语在很多场景下,我们都需要给容器设定宽高比,实现自适应占位,巧用margin/padding可以让我们实现我们的需 ...
关于Iframe嵌入页面，获取内部页面高度的办法
项目中经常会嵌入别人的页面,如果不知道被嵌入页面的高度,就没法给Iframe高度赋值,内部嵌入的页面就会出现滚动条,影响页面的美观. 1.如果被嵌入页面和当前页面不跨域,可以使用Iframe的@loa ...
css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
CSS两列高度自适应，右边自适应
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

iframe html高度自适应,CSS实现iframe高度自适应示例

iframe html高度自适应,CSS实现iframe高度自适应示例相关推荐

最新文章

热门文章