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

在遇到上述问题,您是否第一反应就是利用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;
}

上下div高度动态自适应--另类处理方案的更多相关文章

  1. iframe高度动态自适应

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念 ...

  2. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. div高度不能自适应(子级使用float浮动,父级div高度不能自适应)

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  4. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  5. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  6. 纯Css实现Div高度根据自适应宽度(百分比)调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

  7. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

  8. 父div高度不能自适应子div高度的解决方案

    <div id="parent"><div id="content"> </div></div> 当conten ...

  9. 元素float以后,div高度无法自适应解决方案

    首先要明白 >> 浮动的子元素会脱离文档流,不再占据父元素的空间,父元素也就没有了高度. 解决方案:1 给父元素加上overflow:hidden;属性就行了. 第一种:(给父级加over ...

随机推荐

  1. maya cmds pymel selectType() 选择类型切换

    maya cmds pymel selectType() 选择类型切换 import maya.cmds as cmds cmds.selectType( polymeshFace = True ) ...

  2. KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机

    KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机 2.刷入第三方Recovery(即TWRP) TWRP(TeamWin Recovery Project)是一款XDA大神 ...

  3. IntelliJ IDEA 2016.2 配置Tomcat 运行Web项目

    1.可能会出现的问题 Run-->Edit Configurations 中点击"+"号没有tomcat server... 解决办法:File--->Setting- ...

  4. LeetCode 字符串专题(一)

    目录 LeetCode 字符串专题 <c++> \([5]\) Longest Palindromic Substring \([28]\) Implement strStr() [\(4 ...

  5. Prometheus — Process-exporter进程监控

    由于我们常用的node_exporter并不能覆盖所有监控项,这里我们使用Process-exporter 对进程进行监控. 安装process-exporter wget https://githu ...

  6. java课程之团队开发冲刺阶段1.2

    一.总结昨天进度 1.三个任务都已经实现 2.使用时间:四个小时左右 二.遇到的困难 1.对Android原生的侧拉任务栏不了解,导致使用的时候出现了一部分问题 三.今天任务规划 1.对之前的程序重新 ...

  7. 封装一个 员工类 使用preparedStatement 查询数据 (2) 使用 arrayList 集合

    创建 员工=类生成 有参构造 get set 方法 toString 方法 package cn.hph; public class emp1 { //创建员工类的属性 private int id; ...

  8. django(models)视图与html 简单的操作

    !数据提前写好 urls映射图 点击a标签之后

  9. R语言读取EXCEL文件的各种方法

    路径问题 原始文件路径C:\Users\air\Desktop\1.txt R中有两种方法读取该路径 C:\\Users\\air\\Desktop\\1.txt C:/Users/air/Deskt ...

  10. Three.js学习笔记02

    1.改变相机的位置,让物体移动 通过下面的代码改变相机的位置: camera.position.x =camera.position.x +1; 将相机不断的沿着x轴移动1个单位,也就是相机向右移动. ...