Height self-adaptive: The height self-adaptive is based on pixels (px). It is suitable for single-screen pages and single-screen pixels.
/* Adaptive height based on pixels (px), suitable for single screen pages * // set the height (extending to the bottom of the browser or extending to the bottom of the reference element, you can set a small amount) $. fn. fnSetHeight = function (A, B) {if (this. length> 0) {// handle var $ Reference, Decrease; switch (arguments. length) {case 0: $ Reference = $ (window); Decrease = 0; break; case 1: if (typeof A = 'number ') {$ Reference = $ (window); Decrease = A;} else {$ Reference = $ (). eq (0); Decrease = 0;} break; default: $ Reference = $ (). eq (0); Decrease = B;} // set the height if ($ Reference. length> 0) {var isWindow = $ Reference [0] = window; this. each (function () {var setHeight = function (target) {var $ target = $ (target); var ta_offsetTop = $ target. offset (). top, re_offsetTop = isWindow? 0: $ Reference. offset (). top; var ta_top = parseint(paitarget.css ('padding-top ') + parseint(+target.css ('border-top-width'), re_top = isWindow? 0: parseint(inclureference.css ('padding-top ') + parseint(inclureference.css ('border-top-width'); var h = $ Reference. height () + re_top-(ta_offsetTop-re_offsetTop)-ta_top-Decrease; $ target. height (parseInt (h) ;}; setHeight (this); // prepare for the form's resize event (add methods and attributes to the DOM in the closure) if (! This. ExecutionSequence) {if (! Window. _ SetHeightExecutionSequence) window. _ SetHeightExecutionSequence = 1; this. setHeight = function () {// Add method to DOM: set height setHeight (this) ;}; this. executionSequence = window. _ SetHeightExecutionSequence; // Add attributes to the DOM: Record execution sequence window. _ SetHeightExecutionSequence ++; $ (this ). addClass ('resize-setheight') ;}}) ;}return this ;}; // wrap the resize event of the form to prevent multiple windows from being triggered. win_resize = function (Func, Time) {var isRu N = true, time = Time! = 0? Time | 250: 0; $ (window ). resize (function (e) {if (isRun) {isRun = false; setTimeout (function () {isRun = true; Func (e );}, time) ;}};}; // highly adaptive window for the currently visible view. $ CurrentView = $ (); // The selector needs to be updated in the corresponding event... window. resizeSetHeight = function () {var $ target = $ CurrentView. find ('. resize-setHeight: visible '); var ArrayDOM = $. makeArray ($ target); // queues ArrayDOM in the execution order. sort (function (a, B) {return. executionSequence-B. executionSequence;}); // execute for (var I = 0; I <ArrayDOM. length; I ++) {ArrayDOM [I]. setHeight () ;}}; // bind event Win_resize (ResizeSetHeight, 500); // highly adaptive when the form is resize $ ('# XXX '). on ('click ','. xxx ', function () {// highly adaptive for other events, such as when switching tabs... if (xxx) {$ (window ). resize (); // or: ResizeSetHeight () ;}}); // setHeight usage. The selector can be: string | jQ object | DOM object $ ('# XXX '). fnSetHeight (); // extend to the bottom of the browser $ ('# XXX '). fnSetHeight (20); // extend to the bottom of the browser and reduce 20px $ ('# XXX '). fnSetHeight ('# reference'); // extend to the bottom of the reference element $ ('# XXX '). fnSetHeight ('# reference', 20); // extend to the bottom of the reference element and reduce the size by 20 PX