JavaScript動态設定table的高度

這兩天在調測系統的相容性時遇到一個設定table高度的問題，頁面功能很簡單，就是頁面中央一個檔案，檔案下方有一個儲存按鈕，檔案内可以點選“添加項目按鈕”來在該檔案内增加表格數（這就意味着檔案的高度随時可能發生變化）。現在的問題是IE顯示正常，但是chrome中儲存按鈕框始終出現在檔案的中央（真想偷懶設定一個定死的高度，呵呵，1365px，不要問我怎麼知道，我沒有這麼 想過~_~）。

最簡單的動态設定table高度很容易實作，動态擷取目前檔案的高度然後指派給儲存按鈕就可以了。

function com_onresize(){

        //clientHeight的值由DIV内容的實際高度和CSS中的padding值決定，
        //而offsetHeight的值由DIV内容的實際高度，CSS中的padding值，scrollbar的高度和DIV的border值決定；
        //至于CSS中的margin值，則不會影響 clientHeight和offsetHeight的值
        var contentsHeight = document.body.clientHeight;
        var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
        var head1Height = document.getElementById( "head1" ).offsetHeight;
        var head2Height = document.getElementById( "head2" ).offsetHeight;

        var h = contentsHeight - buttonsHeight - head1Height - head2Height - ;
        if(h < ){
            return;
        }
            //設定table的行高
            document.getElementById( "TableContainer1" ).style.height = h/ + 'px';
            document.getElementById( "TableContainer2" ).style.height = h/ + 'px';
        }

        function com_sbs_pagesize(){

            //window.screen.availWidth     傳回目前螢幕寬度(空白空間) 
            //window.screen.availHeight     傳回目前螢幕高度(空白空間) 
            //window.screen.width     傳回目前螢幕寬度(分辨率值) 
            //window.screen.height     傳回目前螢幕高度(分辨率值) 
            //window.document.body.offsetHeight;     傳回目前網頁高度 
            //window.document.body.offsetWidth;     傳回目前網頁寬度 

            var screenHeight = window.screen.height;
            var availHeight = window.screen.availHeight;
            var index = document.getElementById( "TableContainer1" ).children[].rows.length;
            var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
            var head1Height = document.getElementById( "head1" ).offsetHeight;
            var head2Height = document.getElementById( "head2" ).offsetHeight;

            var mainH = buttonsHeight + head1Height +head2Height + ;
            while ((availHeight-mainH) < ( +  + *index)*){
                index = index - ;
            }
            var tableHeight =  +  + *index;
            document.getElementById( "TableContainer1" ).style.height = tableHeight + 'px';
            document.getElementById( "TableContainer2" ).style.height = tableHeight + 'px';
            //window.resizeTo(width,height)方法用于把視窗大小調整為指定的寬度和高度
            window.resizeTo(document.body.offsetWidth,mainH + tableHeight*);

}
           

但是問題是我來改這個bug的時候發現這個檔案被分成了多個div多個table，前台頁面寫的好亂！而且當我去嘗試使用JS腳本給TR的style.height屬性指派，這個高度設定并不能表現出來，上網搜了一下，别人是這樣回答的：

确實在Chrome，使用JS腳本給TR的style.height屬性指派，不能表現出來。愚以為，TR元素隻是容納定位TD元素的容器，它本身并沒有外觀。給TR的height指派，是把其height屬性傳遞給了其中的TD。使用JS指派的時候，IE和FF都把值傳遞給了TD，Chrome要麼是沒有給TD傳遞這個值，要麼傳遞了沒有表現出來。我認為前者可能性比較大。

然後我又查了一下W3C裡面

<tr>

和

<td>

的屬性

<tr>

标簽的可選屬性

<td>

标簽的可選屬性

問題就顯而易見了。

附錄：

網頁可見區域寬： document.body.clientWidth;

網頁可見區域高： document.body.clientHeight;

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);

網頁可見區域高： document.body.offsetHeight (包括邊線的寬);

網頁正文全文寬： document.body.scrollWidth;

網頁正文全文高： document.body.scrollHeight;

網頁被卷去的高： document.body.scrollTop;

網頁被卷去的左： document.body.scrollLeft;

網頁正文部分上： window.screenTop;

網頁正文部分左： window.screenLeft;

螢幕分辨率的高： window.screen.height;

螢幕分辨率的寬： window.screen.width;

螢幕可用工作區高度： window.screen.availHeight;

螢幕可用工作區寬度：window.screen.availWidth;

scrollHeight: 擷取對象的滾動高度。

scrollLeft:設定或擷取位于對象左邊界和視窗中目前可見内容的最左端之間的距離

scrollTop:設定或擷取位于對象最頂端和視窗中可見内容的最頂端之間的距離

scrollWidth:擷取對象的滾動寬度

offsetHeight:擷取對象相對于版面或由父坐标 offsetParent 屬性指定的父坐标的高度

offsetLeft:擷取對象相對于版面或由 offsetParent 屬性指定的父坐标的計算左側位置

offsetTop:擷取對象相對于版面或由 offsetTop 屬性指定的父坐标的計算頂端位置

event.clientX 相對文檔的水準座标

event.clientY 相對文檔的垂直座标

event.offsetX 相對容器的水準坐标

event.offsetY 相對容器的垂直坐标

document.documentElement.scrollTop 垂直方向滾動的值

offsetParent.scrollTop 表示上層定位容器滾動了多少高度

event.clientX+document.documentElement.scrollTop 相對文檔的水準座标+垂直方向滾動的量；

要擷取目前頁面的滾動條縱坐标位置，用：

document.documentElement.scrollTop;而不是：document.body.scrollTop;

documentElement 對應的是 html 标簽，而 body 對應的是 body 标簽

document.body.scrollWidth很好了解, 就頁面不帶右邊滾動條的長度。

document.body.scrollHeight指頁面的總高度，目前一屏顯示高度再加上縱向滾動條滾動到底的高度

document.documentElement.scrollTop和document.body.scrollTop涉及到chrome浏覽器的相容性問題：

當頁面加入DTD标示後 document.documentElement.scrollTop的值在IE和FF下正常，但document.body.scrollTop一直為0。在Chrome下就反過來了；

最後編輯時間：2016-03-22