一、常见的关于浏览器宽高相关问题：
1. 获取浏览器的宽高，不包括工具栏和滚动条即可视区的宽高
1）对于IE9+、chrome、firefox、Opera、Safari：
window.innerHeight浏览器窗口的内部高度；
window.innerWidth浏览器窗口的内部宽度；
2 ) 对于IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；
document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；
或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：
document.body.clientHeight：表示HTML文档所在窗口的当前高度；
document.body.clientWidth：表示HTML文档所在窗口的当前宽度；
结论：
document.body.clientWidth/Height：的宽高偏小，高甚至默认200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。所以在不同浏览器都实用的的Javascripit方案：
varw = document.documentElement.clientWidth || document.body.clientWidth;
varh = document.documentElement.clientHeight || document.body.clientHeight;
2.网页正文全文宽高
scrollWidth和scrollHeight获取网页内容高度和宽度
1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;
2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；
3.浏览器兼容代码：
varw = document.documentElement.scrollWidth || document.body.scrollWidth;
varh = document.documentElement.scrollHeight || document.body.scrollHeight;
3.网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）
1.值： offsetWidth = scrollWidth + 左右滚动条 +左右边框；
offsetHeight = scrollHeight + 上下滚动条 + 上下边框；
2.浏览器兼容代码：
varw = document.documentElement.offsetWidth || document.body.offsetWidth ;
varh = document.documentElement.offsetHeight || document.body.offsetHeight ;
4.网页卷去的距离与偏移量
1.``scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
2.``scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
3.``offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
4.``offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;
二、当浏览器大小改变时自动刷新
这里是jquery插件方法：
$(window).resize(function(){ alert("窗体大小改变了！"); //location.reload() //这里你可以尽情的写你的刷新代码！ });
三、如何让table水平或者垂直拖动
主要是在table外面加上div以控制拖动。水平拖动的原理：div的宽度小于table的宽度，且div的overflow-x:scroll; 垂直拖动的原理：div的高度小于table的高度，且div的overflow-y:scroll; 如果不需要滚动overflow:hidden;
见如下代码：
1）水平拖动（自己体会，不美观，只有原理）
<div id="div_box" style="width:200px;overflow-x:scroll;">
<table style="width:400px;">
<thead>
<tr>
<th>单号</th>
<th>时间</th>
<th>地点</th>
<th>事件</th>
<th>人物</th>
</tr>
</thead>
<tbody>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
</tbody>
</table>
</div>
2）垂直拖动（不固定头部）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
thead tr{ background: #eeeeee; }
thead tr th { padding:5px 10px;border:1px solid #7C7C7C;width:150px;}
tbody tr td{ border:1px solid #7C7C7C; text-align: center}
</style>
</head>
<body>
<div id="div_box" style="height:200px;width:900px;overflow-y:scroll;border:1px solid grey;">
<table style="height:400px;width:880px;border-collapse: collapse;">
<thead>
<tr>
<th>单号</th>
<th>时间</th>
<th>地点</th>
<th>事件</th>
<th>人物</th>
</tr>
</thead>
<tbody>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
<tr>
<td>153151541</td>
<td>2018-01-01</td>
<td>某个城市的某个区的某个村的某个角落</td>
<td>发生了诡异的事情</td>
<td>张三，李四，王二麻子</td>
</tr>
</tbody>
</table>
</div>
</body>
3）垂直拖动（固定头部）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.Box{ overflow:hidden;}
.tableBox{ height:200px; width:300px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
.tablehead{ position:absolute; width:300px; left:0;}
.tablebody{ position:absolute; width:301px; height:200px; overflow-y:auto; overflow-x:hidden; top:24px; left:0;}
td{ width:88px;white-space:normal;}
table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
</style>
</head>
<body>
<div class="Box">
<div class="tableBox" >
<div class="tablehead">
<table class="head" border="1px">
<tr>
<td>姓名</td><td>性别</td><td>年龄</td>
</tr>
</table>
</div>
<div class="tablebody">
<table class="body" border="1px" >
<tr><td>张家村里48号李家的李梅梅</td><td>女</td><td>18</td></tr>
<tr><td>小张</td><td>男</td><td>15</td></tr>
<tr><td>小美</td><td>女</td><td>12</td></tr>
<tr><td>小弟</td><td>男</td><td>16</td></tr>
<tr><td>五二</td><td>男</td><td>12</td></tr>
<tr><td>王四</td><td>男</td><td>17</td></tr>
<tr><td>张三</td><td>女</td><td>15</td></tr>
<tr><td>小明</td><td>男</td><td>14</td></tr>
<tr><td>李四</td><td>男</td><td>13</td></tr>
<tr><td>七七</td><td>女</td><td>12</td></tr>
<tr><td>九九</td><td>男</td><td>18</td></tr>
<tr><td>麻子</td><td>男</td><td>12</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
