本文介绍如何使用JavaScript动态计算并设置表格高度，以替代静态CSS设置。通过监听窗口大小变化，实时获取容器及头部元素的高度，进而调整表格容器的样式高度，确保页面布局在不同屏幕尺寸下的自适应与完整性。
动态设置表格高度的必要性
虽然可以直接在table标签中通过CSS静态设置高度，但这无法满足动态调整的需求。那么，如何通过JavaScript动态设置表格高度呢？
基于窗口大小变化的动态高度计算实现
function com_onresize(){
var contentsHeight = document.body.clientHeight;
var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
var head1Height = document.getElementById( "head1" ).offsetHeight;
var head2Height = document.getElementById( "head2" ).offsetHeight;
var t1 = document.getElementById( "TableContainer1" ).style.height;
var t2 = document.getElementById( "TableContainer2" ).style.height;
//alert(document.getElementById( "TableContainer1" ).style.height);
var h = contentsHeight - buttonsHeight - head1Height - head2Height - 13;
if(h < 110){
return;
}
document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';
document.getElementById( "TableContainer2" ).style.height = h/2 + 'px';
}
function com_sbs_pagesize(){
var screenHeight = window.screen.height;
var availHeight = window.screen.availHeight;
//alert(document.getElementById( "TableContainer1" ).children[0].rows.length);
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;
//20:scroll 35:title 25:tr
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(document.body.offsetWidth,mainH + tableHeight*2);
}