這段時間在工作中遇到乙個看似較為棘手的問題。問題描述：查詢報表頁面分為上下兩部分，上部分為條件輸入區域，下部分為報表展示區域。客戶要求做到預設滿屏（但要動態適應不同的窗體大小，也就是瀏覽器窗體使用者會手動改變其大小），但上部分條件輸入區域有動態變化高度的現象。
閒話少說，上**。首先本人為了處理與ie的相容性，對現代瀏覽器，ie瀏覽器做了區別對待。然後提供了乙個工廠類以供使用。
/*在此處，為了做到相容ie11（因為ie11不支援attacheevent方法，所以也會被判斷為現代瀏覽器），本人建立的dom，不是使用的object而是使用的iframe，因為在ie下object的onload事件不能觸發，而iframe的可能有；並且iframe的邊框一定要去掉，否則影響判斷。* * 現代瀏覽器處理方案
*/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
()
/*ie瀏覽器的實現相對簡單，因為ie環境下的div天身支援onresize事件。* * ie的處理方案
*/function
rptautoheightforie(context)
var iept =rptautoheightforie.prototype;
iept.init = function
());
this.context.onresize(this
.context.$header.clientheight);
事件window.onresize = function
() }
iept.dispose = function
()
//此處本人在獲取style的屬性值，使用了getcomputedstyle和currentstyle實現的，這民是標準的方法。處理高度自適應的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
()
js**：
var irow = 2;html**：function
addrow()
var autoheightfactory = new
rptautoheightfactory();
autoheightfactory.init();
<css**：div
class
="rpt-wrap"
>
<
div
class
="rpt-header"
>
<
button
type
="button"
onclick
="addrow()"
>新增
button
>
<
p>第一行內容
p>
div>
<
div
class
="rpt-cont"
>
div>
div>
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是專門來解決...