自适应屏幕的后台系统？

大家都知道，一般基于html的办公软件都是上下左右充满屏幕的，如何做到适配不同大小的屏幕呢？

先看看我写的demo吧，http://139.224.0.122:8080/demoUI/index.html

代码资源上传到百度云了，在上面那个链接里，慢慢找吧。

1.首先你需要给body的高度和宽度都是100%，如果不这样做，你下面的任何一个div设置100%都是无效的，除非你给他一个已知宽度高度的父容器。

* {            padding: 0;            margin: 0;            font-family: "微软雅黑";        }        body {height:100%;width:100%;overflow:hidden;        }

2.然后就开始写头部

        .head {            height: 80px;            width: 100%;        }

3.接着是尾部

<div id="footer" style="position: fixed; bottom: 0; left: 0; right: 0; height: 30px; line-height: 30px; 

background-color: #337ED2; text-align: center;">XXXXXX公司</div>

4.重点就是中间那块主体了

    $(function () {var heig = document.documentElement.clientHeight; //获取当前浏览器的高度$("#main_body")[0].style.height = heig - 110 + "px"; //减去头尾部分的高度80+30=110px    })

5.我们有些时候需要用到100%-20px 之类的计算，这时候可以用calc

height: calc(100% - 20px);