控制DIV占满屏幕

网上找了很多帖子，希望是CSS控制的，但是在bootstrap环境下，控制方式上有点问题。达不到想要的效果。

项目中需要实现的效果：

DIV区域占满当前窗口的高度。且在ctrl+鼠标滚轮调整窗口大小的时候，依然占满窗口高度。且，不论DIV区域内容到底多少，都是占满窗口高度，内容多的时候，显示垂直滚动条。左右窗口显示的是一个信息树，ztree实现，右边窗口将用datatable实现表格。这里重点是DIV高度占满窗口的高度。。。

研究了很多方式，最终还是选择了通过js的方式控制DIV占满当前窗口的功能。代码如下（demo.html）：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>DIV Height Full</title>
  6 <link href="../../css/bootstrap.min.css" rel="stylesheet">
  7 <script src="../../js/jquery-2.1.1.min.js"></script>
  8 <script src="../../js/bootstrap.min.js"></script>
  9 
 10 <link href="../../lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
 11 <link href="height.css" rel="stylesheet">
 12 <script src="../../lib/zTree/js/jquery.ztree.core.js"></script>
 13 <script src="../../lib/zTree/js/jquery.ztree.excheck.js"></script>
 14 <script src="mytree.js"></script>
 15 </head>
 16 <body>
 17 <div class="container">
 18     <div class="row">        
 19         <div class="col-md-2">
 20             <div class="sub-border">
 21                 <div id="treePanel" class="form-group">
 22                     <ul id="myTree"  class="ztree" style="overflow: hidden;">
 23                     </ul>
 24                 </div>
 25             </div>
 26         </div>
 27         <div class="col-md-10">
 28             <div class="sub-border">
 29                 <div class="form-group">
 30                     <p>nihao</p>
 31                     <p>nihao</p>
 32                     <p>nihao</p>
 33                     <p>nihao</p>
 34                     <p>nihao</p><p>nihao</p>
 35                     <p>nihao</p>
 36                     <p>nihao</p>
 37                     <p>nihao</p>
 38                     <p>nihao</p><p>nihao</p>
 39                     <p>nihao</p>
 40                     <p>nihao</p>
 41                     <p>nihao</p>
 42                     <p>nihao</p><p>nihao</p>
 43                     <p>nihao</p>
 44                     <p>nihao</p>
 45                     <p>nihao</p>
 46                     <p>nihao</p><p>nihao</p>
 47                     <p>nihao</p>
 48                     <p>nihao</p>
 49                     <p>nihao</p>
 50                     <p>nihao</p><p>nihao</p>
 51                     <p>nihao</p>
 52                     <p>nihao</p>
 53                     <p>nihao</p>
 54                     <p>nihao</p><p>nihao</p>
 55                     <p>nihao</p>
 56                     <p>nihao</p>
 57                     <p>nihao</p>
 58                     <p>nihao</p><p>nihao</p>
 59                     <p>nihao</p>
 60                     <p>nihao</p>
 61                     <p>nihao</p>
 62                     <p>nihao</p><p>nihao</p>
 63                     <p>nihao</p>
 64                     <p>nihao</p>
 65                     <p>nihao</p>
 66                     <p>nihao</p><p>nihao</p>
 67                     <p>nihao</p>
 68                     <p>nihao</p>
 69                     <p>nihao</p>
 70                     <p>nihao</p><p>nihao</p>
 71                     <p>nihao</p>
 72                     <p>nihao</p>
 73                     <p>nihao</p>
 74                     <p>nihao</p><p>nihao</p>
 75                     <p>nihao</p>
 76                     <p>nihao</p>
 77                     <p>nihao</p>
 78                     <p>nihao</p><p>nihao</p>
 79                     <p>nihao</p>
 80                     <p>nihao</p>
 81                     <p>nihao</p>
 82                     <p>nihao</p><p>nihao</p>
 83                     <p>nihao</p>
 84                     <p>nihao</p>
 85                     <p>nihao</p>
 86                     <p>nihao</p><p>nihao</p>
 87                     <p>nihao</p>
 88                     <p>nihao</p>
 89                     <p>nihao</p>
 90                     <p>nihao</p><p>nihao</p>
 91                     <p>nihao</p>
 92                     <p>nihao</p>
 93                     <p>nihao</p>
 94                     <p>nihao</p><p>nihao</p>
 95                     <p>nihao</p>
 96                     <p>nihao</p>
 97                     <p>nihao</p>
 98                     <p>nihao</p>
 99                 </div>
100             </div>
101         </div>
102     </div>
103 </div>
104 </body>
105 </html>

下面是sub-border及p的样式内容height.css文件：

 1 .sub-border{
 2     border: 1px solid #408080;
 3     border-radius: 10px;   
 4     background-color: #33ff9a;
 5     overflow-y:auto;
 6     overflow-x:hidden;     
 7 }
 8 
 9 p{
10     margin: 0 100px;
11 }

最后看看demo.html中的mytee.js的内容：

 1 (function($){
 2     var setting = {
 3 //            check: {
 4 //                enable: true,
 5 //                chkboxType:{ "Y":'ps', "N":'ps'}
 6 //            },
 7             data: {
 8                 simpleData: {
 9                     enable: true ,
10                     idKey:"id",
11                     pIdKey:"parentId",
12                     rootPId:-1 
13                 }
14             }            
15         };
16     var zNodes = [{"id" : 0, "name": "信息中心", "parentId": -1},
17                   {"id" : 1, "name": "DIV", "parentId": 0},
18                   {"id" : 2, "name": "CSS", "parentId": 0},
19                   {"id" : 3, "name": "Height", "parentId": 0}];
20     var mTree;
21     $(function(){
22         $.fn.zTree.init($("#myTree"), setting, zNodes);
23         mTree = $.fn.zTree.getZTreeObj("myTree");
24     })
25     
26     $(function(){
27         var hw = $(window).height();
28         var hs = window.screen.height;
29         var hd = document.documentElement.clientHeight;
30         console.log(hw);
31         console.log(hs);
32         console.log(hd);
33         $(".sub-border").css("height", hw);
34         
35         $(window).resize(function() {
36             hw = $(window).height();
37             $(".sub-border").css("height", hw);
38         });
39     })
40     
41 })(jQuery)

js的重点，就是通过css调整DIV的高度。当ctrl+鼠标滚轮调整窗口大小的时候，用jquery的resize事件调整DIV的高度。

最终的效果如下：