利用$(window).resize()实现窗口大小自适应宽度问题
© 版权声明:本文为博主原创文章,转载请注明出处
问题描述:利用iframe做页面引入,用$(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;// 窗口宽度变为现有宽度+滚动条宽度
21 }
initHeight = contentHeight;// 将初始高度重置为现有高度 $("#main-wrapper").width(screenWidth);// 设置内容区域宽度
$("#main-wrapper").css("margin-top", navHeight);// 设置内容区域margin-top
$("#main-wrapper").height(contentHeight);// 设置内容区域高度 }
利用$(window).resize()实现窗口大小自适应宽度问题的更多相关文章
- WPF 窗口大小自适应
在设置桌面不同分辨率以及较大DPI下,窗口如何显示的问题. 方案一 设置窗口最大值和最小值显示 通过对比当前屏幕的可显示区域,将窗口高宽最大值和最小值,设置为窗口的实际高宽(此例中仅设置高度) 界面设 ...
- jqGrid随窗口大小变化自适应宽度
$(function(){ $(window).resize(function(){ $("#jqgridID").setGridWidth($(window).width()); ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- VueJs 监听 window.resize 方法
Vuejs 本身就是一个 MVVM 的框架. 但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize 恩,我做之前也是百度了一下.看到大家伙都为这个 ...
- 关于jqGrid组件表格无法自适应宽度问题
今天生成了一个4列的表格,但是无法自适应宽度,使用 $(window).resize(function(){ $(window).unbind("onresize"); $(&qu ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- 解决extjs grid 不随窗口大小自适应的问题
解决extjs grid 不随窗口大小自适应的问题 August 30, 2010 zhai Javascript 8,403 viewsGo to comment 最近遇到的问题,在使用grid的时 ...
- 解决Javascript中$(window).resize()多次执行(转)
https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...
- 解决Javascript中$(window).resize()多次执行
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后 ...
随机推荐
- linq中转换类型报错
错误:LINQ to Entities 不识别方法“Int32 ToInt32(System.String)”,因此该方法无法转 上面报错是因为在Linq表达式中无法识别Convert和Parse方法 ...
- Laravel 5.5 Blade::if 简介
Laravel 5.5 引入了一个新的黑科技,就是你可以使用 Blade::if 来进行一些简单的逻辑判断啦!想不出应用场景在哪?想象下面的场景: 判断一个用户是否是 admin 判断应用的开发环境不 ...
- JavaScript基础之原型对象和原型链
原型对象 原型对象简单来说就是函数的原型所指向的对象.前面说原型的时候,说了Object.prototype所指对象就是Object(函数)的原型对象.在每个函数的原型对象中,默认会有construc ...
- kong后台接口
在nginx-kong.lua中,require('lapis').serve('kong.api'),先require文件/usr/local/share/lua/5.1/lapis/init.lu ...
- lua取随机数
do local a = string.reverse(os.time()) print(a) math.randomseed(a) -- math.randomseed(os.time()) for ...
- MySQL索引,MySQL中索引的限制?
MySQL中索引的限制: 1.MyISAM存储引擎引键的长度综合不能超过1000字节: 2.BLOB和TEXT类型的列只能创建前缀索引: 3.MySQL目前不支持函数索引: 4.使用!= 或者< ...
- maven项目中的GroupId和ArtifactId分别是什么含义
转自 创建maven项目是其中的group id和artifact id怎么填写 groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓 ...
- C#中SortedList类的使用
C#中SortedList类 命名空间:System.Collections 程序集:mscorlib(在mscorlib.dll中) 语法:public class SortedList : IDi ...
- LVS/NAT
平台:RedHat Enterprise Linux centos6.3 ipvsadm ipvs 1. NAT模型 NAT模型:地址转换类型,主要是做地址转换,类 ...
- 2. LVS/DR 配置
平台:RedHat Enterprise Linux centos6.3 ipvsadm ipvs 1.DR模型 DR模型:直接路由模型,每个Real Server ...