上下div高度動態自適應 另類處理方案

2021-09-26 21:29:38 字數 3220 閱讀 8610

這段時間在工作中遇到乙個看似較為棘手的問題。問題描述:查詢報表頁面分為上下兩部分,上部分為條件輸入區域,下部分為報表展示區域。客戶要求做到預設滿屏(但要動態適應不同的窗體大小,也就是瀏覽器窗體使用者會手動改變其大小),但上部分條件輸入區域有動態變化高度的現象。

閒話少說,上**。首先本人為了處理與ie的相容性,對現代瀏覽器,ie瀏覽器做了區別對待。然後提供了乙個工廠類以供使用。

/*

* * 現代瀏覽器處理方案

*/function

rptautoheightformodernbrower(context)

var mpt =rptautoheightformodernbrower.prototype;

mpt.init = function

());

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

= "text/html";

object.src = "about:blank";

this

this.$object =object;

//先觸發一次

this.context.onresize(this

.context.$header.clientheight);

事件window.onresize = function

() }

mpt.dispose = function

()

在此處,為了做到相容ie11(因為ie11不支援attacheevent方法,所以也會被判斷為現代瀏覽器),本人建立的dom,不是使用的object而是使用的iframe,因為在ie下object的onload事件不能觸發,而iframe的可能有;並且iframe的邊框一定要去掉,否則影響判斷。

/*

* * ie的處理方案

*/function

rptautoheightforie(context)

var iept =rptautoheightforie.prototype;

iept.init = function

());

this.context.onresize(this

.context.$header.clientheight);

事件window.onresize = function

() }

iept.dispose = function

()

ie瀏覽器的實現相對簡單,因為ie環境下的div天身支援onresize事件。

//

處理高度自適應的factory

function

rptautoheightfactory(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 =;

this.diffval = 0;

this.realize =document.attachevent

? new

rptautoheightforie(cxt)

: newrptautoheightformodernbrower(cxt);

}var pt =rptautoheightfactory.prototype;

pt.init = function

() pt.resize = function

() }

}pt.getheight = function

(dom)

pt.getstyle = function

(dom, key)

else

if(window.getcomputedstyle)

}pt.getmaxheight = function

()

此處本人在獲取style的屬性值,使用了getcomputedstyle和currentstyle實現的,這民是標準的方法。

js**:

var irow = 2;

function

addrow()

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.rpt-wrap.rpt-header.rpt-cont

上下div高度動態自適應 另類處理方案

這段時間在工作中遇到乙個看似較為棘手的問題。問題描述 查詢報表頁面分為上下兩部分,上部分為條件輸入區域,下部分為報表展示區域。客戶要求做到預設滿屏 但要動態適應不同的窗體大小,也就是瀏覽器窗體使用者會手動改變其大小 但上部分條件輸入區域有動態變化高度的現象。閒話少說,上 首先本人為了處理與ie的相容...

div自適應高度

如何控制div最小高度又div自適高度 我們在用div布局的時候經常會遇到這樣的一種情況 我們需要設定乙個div高度,當裡面的東西超過這個高度時,讓這個容器自動被撐開,也就是div自適應高度。當裡面的資訊很少時候,我們就設定它乙個最小的固定高度。我們知道,在ie6中,如果子容器的高度超過父容器的時候...

div高度自適應

盒模型的height的預設值為auto,它表示盒模型的高度由它所包裹的內容高度來決定,因此div不設定height的值就可以實現高度的自適應。然而在實際css布局實踐中,常常出現一些特殊的需求。div的高度初始為某一固定高度,然後隨著內容的增多高度自適應。css屬性中min height是專門來解決...