注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

div自动适应浏览器缩放的宽度  

2013-01-18 00:25:15|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

有时候我们需要让某个外层div宽度设置为Auto,横向布满整个浏览器视窗,在最大化情况下浏览效果达到。但是我们缩小浏览器或是拖小其视窗的时候问题出现了,如果还有个div比浏览器视窗的宽度大,那Auto的div只显示了前半部分,相当于水平滚动条拉到最左边的视窗大小。如何让Auto的div在缩放的情况下也能100%显示?

这里用到一个resize事件来监听, resize事件监听使用不当会造成浏览器假死现象,如果缩放浏览器会不断触发导致假死。

下面通过一个实例来解决这个问题。

有两个div

<div style="width:aotu;height:100px;background:#C30" id=div1></div>
<div style="width:990px;height:100px;background:#FC0" id=div2></div>


在1024分辨率下最大化显示是希望得到的效果,若缩小浏览器,则div1后就会出现空白。


下面js代码,需要引用jquery
<script>
$(function() { 
 if($.browser.msie && ("6.0,7.0".indexOf($.browser.version) != -1)) {//判断浏览器是ie6 或 ie7
 //加入个隐藏的绝对定位的div,宽度要为百分比,若值太小不起作用。这是处理ie6、ie7浏览器版本的特殊方法,本例的关键之处
  $("body").append( '<div id="ie-resize" style="width:10%;height:10%;position:absolute;z-index:-999;visibility:hidden"></div>');
  $("#ie-resize").resize(function() {//将resize事件绑定在该层上
 ///如果浏览器发生缩放则触发的代码块部分,这里可以使用document.body.clientWidth取得浏览器缩放的值,这个值在ie和ff下是不同的,ie6、7取得的是文档内容所占的宽度,如上面的两个div,ie下浏览器缩小的时候始终显示是990,而ff则显示实际的缩小宽度。可以通过alert(document.body.clientWidth)来查看。
 //下面定位上面两个div
    if(document.body.clientWidth>=990 && document.body.clientWidth<=1024)//如果窗口缩放大小在990--1024像素之间
    {
  $("#div1").css("width","auto");//设置为Auto
 }
    else
     {
   $("#div1").css("width","990px");
  
 }//设置和div2一样的宽度
 
  });
}
 else{//其他浏览器
  $(window).resize(function() {
 if(document.body.clientWidth>=990 && document.body.clientWidth<=1024)//如果窗口缩放大小在990--1024像素之间
 {
  $("#div1").css("width","auto");
  }//设置为Auto
 else
 {
  $("#div1").css("width","990px");
  }//设置和div2一样的宽度
  })
 
 }
});
</script>
执行代码部分可以依需要设定,如加上判断浏览器分辨率等就能得到较好的页面展示

  评论这张
 
阅读(11153)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017