自适应屏幕的后台系统？

大家都知道，一般基于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);