【HTML+CSS】教你切图篇4-iframe布局、多列布局实现

1. 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%;

height: 100%;