按照客户端的大小来自动改变部局

看效果()：

看效果(窗口时):

思路：通过获取到客户端浏览器的大小来动态的改变部局的大小

通过以下方法可以获得到浏览器的信息：

网页可见区域宽：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

通过JS代码捕获到窗口大小的改变，并在第一次加载完页面后对部局大小进行设定：

在JS代码中写resize事件接收函数，改变部局的宽和高

<script type="text/javascript">$(document).ready(function(){$.extend({changeBodySize:function(){        console.log ("width:" + document.documentElement.clientWidth);        console.log ("height:" + document.documentElement.clientHeight);        $("#id_main_body_menu").attr("style","height:" + (document.documentElement.clientHeight - 20) + "px;");        $("#id_main_body_content").attr("style",                "height:" + (document.documentElement.clientHeight - 20) + "px;" +                 "width:" + (document.documentElement.clientWidth - 120) + "px;");        }});$.changeBodySize();        $(window).resize(function() {            $.changeBodySize();        });});</script>

通过jquery中的extend函数定义一个changeBodySize函数用于改变界面的大小。在浏览器窗口 resize或页面就绪后调用changeBodySize，达到目的