利用$(window).resize()实现窗口大小自适应宽度问题

问题描述：利用iframe做页面引入，用(window).resize()作自适应;结果窗口变小时，利用(window).resize()作自适应;结果窗口变小时，利用(window).width()获取到的宽度总是小于浏览器宽度，在左边留下17px宽度的白条。

代码如下：

<iframe id="main-wrapper" name="main-wrapper" src="zkt.htm" frameborder="0" style="float: right;"></iframe>

//?自适应主页面大小
$(window).resize(function?()?{
　　initSize();
}
//?初始化主页面大小
function?initSize()?{
　　var?screenHeight?=?$(window).height();//?窗口高度
　　var?navHeight?=?$("#topNav").height();//?顶部导航栏高度
　　var?contentHeight?=?screenHeight?-?navHeight;//?内容区域高度
　　var?screenWidth?=?$(window).width();//?窗口宽度
　　$("#main-wrapper").width(screenWidth);//?设置内容区域宽度
　　$("#main-wrapper").css("margin-top",?navHeight);//?设置内容区域margin-top
　　$("#main-wrapper").height(contentHeight);//?设置内容区域高度
}

问题分析：在页面大小发生变化时，如果高度减小时，此时会出现滚动条，$(window).width()获取的宽度为减去滚动条之后的宽度，又因为iframe默认靠右，因此左边会出现空白。

解决方案：判断当页面高度减小时，将宽度设置为$(window).width()加上滚动条(默认17px)的宽度即可。

var?initHeight?=?$(window).height()?-?$("#topNav").height();//?初始主页面高度
//?自适应主页面大小
$(window).resize(function?()?{
　　initSize();
}
//?初始化主页面大小
function?initSize()?{
　　var?screenHeight?=?$(window).height();//?窗口高度
　　var?navHeight?=?$("#topNav").height();//?顶部导航栏高度
　　var?contentHeight?=?screenHeight?-?navHeight;//?内容区域高度
　　var?screenWidth?=?$(window).width();//?窗口宽度
　　if?(initHeight?>?contentHeight)?{//?初始高度大于现有高度，高度变小过程中会出现滚动条
　　　　screenWidth?=?screenWidth?+?17;//?窗口宽度变为现有宽度+滚动条宽度
　　}
　　initHeight?=?contentHeight;//?将初始高度重置为现有高度
　　$("#main-wrapper").width(screenWidth);//?设置内容区域宽度
　　$("#main-wrapper").css("margin-top",?navHeight);//?设置内容区域margin-top
　　$("#main-wrapper").height(contentHeight);//?设置内容区域高度
}