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

看效果()：

看效果(窗口时):

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

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

网页可见区域宽：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，达到目的