© 版权声明：本文为博主原创文章，转载请注明出处

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

　　代码如下：

1 

1 // 自适应主页面大小 2 $(window).resize(function () { 3      4 　　initSize(); 5  6 } 7  8  9 // 初始化主页面大小10 function initSize() {11 12 　　var screenHeight = $(window).height();// 窗口高度13 　　var navHeight = $("#topNav").height();// 顶部导航栏高度14 　　var contentHeight = screenHeight - navHeight;// 内容区域高度15 　　var screenWidth = $(window).width();// 窗口宽度16 17 　　$("#main-wrapper").width(screenWidth);// 设置内容区域宽度18 　　$("#main-wrapper").css("margin-top", navHeight);// 设置内容区域margin-top19 　　$("#main-wrapper").height(contentHeight);// 设置内容区域高度20 21 }

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

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

 

1 var initHeight = $(window).height() - $("#topNav").height();// 初始主页面高度 2  3 // 自适应主页面大小 4 $(window).resize(function () { 5      6 　　initSize(); 7  8 } 9 10 11 // 初始化主页面大小12 function initSize() {13 14 　　var screenHeight = $(window).height();// 窗口高度15 　　var navHeight = $("#topNav").height();// 顶部导航栏高度16 　　var contentHeight = screenHeight - navHeight;// 内容区域高度17 　　var screenWidth = $(window).width();// 窗口宽度18 19 　　if (initHeight > contentHeight) {
    // 初始高度大于现有高度，高度变小过程中会出现滚动条20 　　　　screenWidth = screenWidth + 17;// 窗口宽度变为现有宽度+滚动条宽度21 　　}22 　　initHeight = contentHeight;// 将初始高度重置为现有高度23 24 　　$("#main-wrapper").width(screenWidth);// 设置内容区域宽度25 　　$("#main-wrapper").css("margin-top", navHeight);// 设置内容区域margin-top26 　　$("#main-wrapper").height(contentHeight);// 设置内容区域高度27 28 }