這兩天在調測系統的兼容性時遇到一個設置table高度的問題，頁面功能很簡單，就是頁面中央一個文件，文件下方有一個保存按鈕，文件內可以點擊“添加項目按鈕”來在該文件內增加表格數（這就意味著文件的高度隨時可能發生變化）?，F在的問題是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 - 13;if(h < 110){return;}//設置table的行高document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';document.getElementById( "TableContainer2" ).style.height = h/2 + '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[0].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 + 13;while ((availHeight-mainH) < (20 + 35 + 25*index)*2){index = index - 1;}var tableHeight = 20 + 35 + 25*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*2);}

但是問題是我來改這個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

總結

以上是生活随笔為你收集整理的JavaScript动态设置table的高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。