你的位置:首页 > 网页设计

[网页设计]上下div高度动态自适应

     这段时间在工作中遇到一个看似较为棘手的问题。问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域有动态变化高度的现象。

     在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来,供大家参考,有疑问或建议欢迎交流和沟通。

一、上代码

闲话少说,上代码。首先本人为了处理与IE的兼容性,对现代浏览器,IE浏览器做了区别对待。然后提供了一个工厂类以供使用。

1.1、 现代浏览器的实现

/**  * 现代浏览器处理方案  */  function RptAutoHeightForModernBrower(context){   this.context = context;   this.$object = null;  }  var mPt = RptAutoHeightForModernBrower.prototype;  mPt.init = function(){   var object = document.createElement('iframe'), self = this; //object在ie11上onload方法不能执行   //区元素,绝对定位(父级必须是相对定位,否则参考到body了),四个为0,width、height为100%让其宽、高与父级相同,pointer-events:none(不接受鼠标事件)z-index:层级最低。   object.onload = function(){     var context = this;    this.contentDocument.defaultView.addEventListener('resize', function(){      self.context.onResize(context.clientHeight);    });   }   object.setAttribute('style', 'display:block; position:absolute; border:0px; visibility: hidden; left:0px; right: 0px; top: 0px; bottom: 0px; pointer-events: none; z-index: -1; overflow:hidden; width: 100%; height: 100%; opacity:0;');   //object.type = "text/html";   object.src = "about:blank";   this.context.$header.appendChild(object);   this.$object = object;   //先触发一次    this.context.onResize(this.context.$header.clientHeight);   //window.resize事件   window.onresize = function(){    self.context.onResize(self.context.$header.clientHeight);   }  }  mPt.dispose = function(){   this.$object.contentDocument.defaultView.removeEventListener('resize');   this.context.$header.removeChild(this.$object);  }

     在此处,为了做到兼容IE11(因为Ie11不支持attacheEvent方法,所以也会被判断为现代浏览器),本人创建的DOM,不是使用的object而是使用的iframe,因为在IE下object的onload事件不能触发,而iframe的可能有;并且iframe的边框一定要去掉,否则影响判断。

 

1.2、ie浏览器的实现

/**  * ie的处理方案  */  function RptAutoHeightForIE(context){   this.context = context;  }  var iePt = RptAutoHeightForIE.prototype;  iePt.init = function(){   var self = this;   this.context.$header.attachEvent('onresize', function(){    self.context.onResize(window.event.srcElement.clientHeight);   });   this.context.onResize(this.context.$header.clientHeight);   //window.resize事件   window.onresize = function(){    self.context.onResize(self.context.$header.clientHeight);   }  }  iePt.dispose = function(){   this.context.$header.detachEvent('onresize');  }

     IE浏览器的实现相对简单,因为IE环境下的div天身支持onresize事件。

1.3、工厂类

//处理高度自适应的Factory  function RptAutoHeightFactory(opts){   this.opts = opts || {};   this.$wrap = this.opts.wrap || document.getElementsByClassName('rpt-wrap')[0];   this.$header = this.opts.header || this.$wrap.getElementsByClassName('rpt-header')[0];   this.$cont = this.opts.cont || this.$wrap.getElementsByClassName('rpt-cont')[0];   var cxt = {    $header: this.$header,    onResize: this.resize()   };   this.diffVal = 0;   this.realize = document.attachEvent     ? new RptAutoHeightForIE(cxt)     : new RptAutoHeightForModernBrower(cxt);  }  var pt = RptAutoHeightFactory.prototype;  pt.init = function(){   var bTop = this.getStyle(this.$header, "border-top-width");   var bBottom = this.getStyle(this.$header, "border-bottom-width");   bTop = parseInt(bTop.replace('px', ''), 10);   bBottom = parseInt(bBottom.replace('px', ''), 10);   this.diffVal += bTop + bBottom;      var bTop = this.getStyle(this.$cont, "border-top-width");   var bBottom = this.getStyle(this.$cont, "border-bottom-width");   bTop = parseInt(bTop.replace('px', ''), 10);   bBottom = parseInt(bBottom.replace('px', ''), 10);   this.diffVal += bTop + bBottom;      this.realize.init();   }  pt.resize = function(){   var $cont = this.$cont, self = this;   return function(headerHeight){    var dist = self.getMaxHeight() - headerHeight - self.diffVal;    if(dist > 1 ){     $cont.style.height = dist +'px'; //加单位,是为了兼容ie    }   }  }  pt.getHeight = function(dom){   var height = dom.clientHeight;      return height;  }  pt.getStyle = function(dom, key){   if(dom.currentStyle){    return dom.currentStyle[key];   }else if(window.getComputedStyle){    return window.getComputedStyle(dom, null)[key];   }  }  pt.getMaxHeight = function(){   return document.documentElement.clientHeight || document.body.clientHeight;  }

      此处本人在获取style的属性值,使用了getComputedStyle和currentStyle实现的,这民是标准的方法。

 

1.4、这样使用

js代码:

var irow = 2;  function addRow(){   var parent = document.getElementsByClassName('rpt-header')[0];   var p = document.createElement('p');   p.innerHTML = "<p>添加第" + irow++ + "行记录</p>";   parent.appendChild(p);  }  var autoHeightFactory = new RptAutoHeightFactory();  autoHeightFactory.init();

html代码:

<div class="rpt-wrap">  <div class="rpt-header">   <button type="button" onclick="addRow()">添加</button>   <p>第一行内容</p>  </div>  <div class="rpt-cont">  </div> </div>

css代码:

html, body{   margin: 0px;   padding: 0px;   height: 100%;  }  .rpt-wrap{   height: inherit;   overflow: hidden;  }  .rpt-header{   border: 1px solid gray;   position: relative;     }  .rpt-cont{   border: 1px solid red;  }