网页页面自适应小结

这段时间调整了几个页面的自适应情况，采用的方式一般都是用js去动态获取当前window的高和宽，然后再按实际情况根据比例去分配。

例如下面的一段代码：

<span style="white-space:pre">		</span>var ww = $(window).width();
var wh = $(window).height();
var contenth = wh-41;
$('#tree').height(contenth);
$("#mulu").height($('#tree').height()-35);
$('#tableDiv').height(contenth);
$('#table').height($('#tableDiv').height()-35);

当然，有的函数是jQuery的。

第一句和第二句，通过$(window)对象的.width()和.height()方法获得了当前窗口的宽和高（这里的当前窗口可以理解为整个html文档），然后是contenth的高度，因为一般都会有一个header，而且header的高度一般都是定高（宽度一般都是atuo）。用窗口高度减去header的高度就是剩下内容的高度了，然后根据实际情况进行分配设计，比如上面的代码是一个两列的结构，左边一列是一个目录树，右边一列是一个表格，等等。

当然了，在实际的项目开发中经常用的都是一个框架，如bootscrap和easyui等等，这些个框架都拥有自己设计好的class，里面难免会有一些padding/margin的属性设置，（padding还好，不影响外部文档流的布局，但是margin往往会挤占位置）。所以，在设置的时候，如果出现明明高度什么的加起来都是正确的，确还是出现了浮动的情况，那么往往就是有个地方的margin在搞鬼了，这个时候你细心的找找，就会找到了。

找到后的处理方式有多种，当然可以直接去改你引用的css文件的内容，但是这种方式太暴力，影响太广，不推荐的呀。你可以在你当前页面重新定位设置一下就ok了，这样清晰明了，不会造成不可预知的影响。好的，这就是页面自适应的一些总结。

前段的学习博大精深，keep going！