Dynamic adaptive of up and down div height-alternative processing scheme and div adaptive

Dynamic adaptive of up and down div height-alternative processing scheme and div adaptive

During this time, I encountered a seemingly tricky problem at work.Problem description: The query report page consists of the upper part and lower parts. The upper part is the condition input area, and the lower part is the report display area. The customer requires that the screen be full by default (but it must dynamically adapt to different form sizes, that is, the browser form user will manually change its size ), however, the height of the input area of the previous condition changes dynamically.

In the case of the above problem, whether your first response is to use the onresize event of the window to dynamically adjust the size. But what should we do when a button in the condition input area dynamically changes the height of the previous part. Is there a unified solution. Today, I have provided my own ideas and tests for your reference. If you have any questions or suggestions, please contact us.

I. Code above

Let's talk less about the code. First of all, I have made a difference with modern browsers and IE browsers to deal with the compatibility with IE. Then a factory class is provided for use.

1.1 modern browser implementation

/*** Modern browser Processing Solution */function RptAutoHeightForModernBrower (context) {this. context = context; this. $ object = null;} var mPt = RptAutoHeightForModernBrower. prototype; mPt. init = function () {var object = document. createElement ('iframe'), self = this; // the onload method of the object on ie11 cannot execute the // partition element and is absolutely located (the parent level must be relative located, otherwise, refer to the body.) four values are 0, width and height are 100%, so that the width and height are the same as the parent level. pointer-events: none (do not accept mouse events) z-index: the lowest level. 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; // trigger this first. context. onResize (this. context. $ header. clientHeight); // window. resize event 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 );}

Here, in order to be compatible with IE11 (because Ie11 does not support the attacheEvent method, it will also be judged as a modern browser), the DOM created by myself is not the object used but the iframe, because the onload event of the object under IE cannot be triggered, while the iframe may exist, and the iframe border must be removed; otherwise, the judgment will be affected.

1.2 Implementation of IE browser

/*** Ie solution */function RptAutoHeightForIE (context) {this. context = context;} var iePt = RptAutoHeightForIE. prototype; iePt. init = function () {var self = this; this. context. $ header. attachEvent ('onsize', function () {self. context. onResize (window. event. srcElement. clientHeight) ;}); this. context. onResize (this. context. $ header. clientHeight); // window. resize event window. onresize = function () {self. context. onResize (self. context. $ header. clientHeight);} iePt. dispose = function () {this. context. $ header. detachEvent ('onresize ');}

The implementation of IE browser is relatively simple, because div in IE Environment supports onresize events.

1.3 Factory

// Process highly adaptive 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 '; // Add units to ensure compatibility with 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.doc umentElement. clientHeight | document. body. clientHeight ;}

Here, I used getComputedStyle and currentStyle to obtain the attribute value of the style. This is a standard method.

 

1.4. Use this method

Js Code:

Var irow = 2; function addRow () {var parent = document. getElementsByClassName ('rpt-header') [0]; var p = document. createElement ('P'); p. innerHTML = "<p> Add row record" + irow ++ "</p>"; parent. appendChild (p);} var autoHeightFactory = new RptAutoHeightFactory (); autoHeightFactory. init ();

Html code:

<Div class = "rpt-wrap"> <div class = "rpt-header"> <button type = "button" onclick = "addRow () "> Add </button> <p> content in the first line </p> </div> <div class =" rpt-cont "> </div>

Css code:

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;        }