1、首先设置样式:body{margin:0padding:0}。
2、如果不设置body的margin和padding为0的话,页面上下左右会出现空白。
代码如下:<iframe src=://fulibac id="myiframe" scrolling="no" frameborder="0"></iframe>。
3、这个方法可以达到让iframe自适应高度的效果,但是如果将窗口放大或缩小效果就不出来了,也就是本文开头讲的。
需要再次刷新,那就不属于自适应了。
代码是:
var ifm= document.getElementById("myiframe")
ifm.height=document.documentElement.clientHeight
一、iframe
元素会创建包含另外一个文档的内联框架(即行内框架)。
二、有以下方式对iframe进行设置高度和宽度
1、iframe元素标签可以使用width和height属性,
<iframe
src
="/index.html"
width="400"
height="300"></iframe>
2、可以使用css来定义宽度和高度
<iframe
src
="/index.html"
style="width:400pxheight:300px"></iframe>
三、补充:
iframe的属性如下:
可以用jQuery获取到当前的窗口的宽度,来计算iframe的宽和高,示例代码如下:
<iframe src="http://www.baidu.com" frameborder="0" id="demo"></iframe><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var ifr_width=$(window).width()*0.75
$("#demo").css('width',ifr_width)
$("#demo").css('height',ifr_width*0.75)
})
</script>
jQuery中获取当前窗口的宽度代码是:$(window).width()
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)