- iframe框架布局;
项目中经常会使用到iframe,iframe虽然比较多毛病,也比较老了,但是有些项目还是需要,一般项目情况如下图:
一般需求:让iframe区域填充满内容div区域,并且窗口大小改变时自适应。
以往的解决方法是通过js判断window的宽高,然后使用窗口宽高减去左侧和头部的尺寸得到iframe的高度,并且添加窗口resize事件函数,当窗口尺寸改变时,重新执行宽高计算方法。这种方式缺点是js运行开销大,每次窗口改变大小都需要重新执行js,对浏览器极不友好。
改进方法:通过css进行布局,重点强调一个原则:
能用css进行布局绝不用js控制。
实现方式图解如下:通过利用css的border-box属性,在iframe区域外面套一个iframe-content类名div,
box-sizing从IE8开始兼容,IE7的同学,还是乖乖写js吧
。
具体css如下:
.frame-content{
position: absolute;
top: 0;
left: 0;
width: 100%;