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

项目中需要实现的效果：

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>DIV Height Full</title>

 <link href="../../css/bootstrap.min.css" rel="stylesheet">

 <script src="../../js/jquery-2.1.1.min.js"></script>

 <script src="../../js/bootstrap.min.js"></script>

 <link href="../../lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

 <link href="height.css" rel="stylesheet">

 <script src="../../lib/zTree/js/jquery.ztree.core.js"></script>

 <script src="../../lib/zTree/js/jquery.ztree.excheck.js"></script>

 <script src="mytree.js"></script>

 </head>

 <body>

 <div class="container">

     <div class="row">

         <div class="col-md-2">

             <div class="sub-border">

                 <div id="treePanel" class="form-group">

                     <ul id="myTree"  class="ztree" style="overflow: hidden;">

                     </ul>

                 </div>

             </div>

         </div>

         <div class="col-md-10">

             <div class="sub-border">

                 <div class="form-group">

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p><p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                     <p>nihao</p>

                 </div>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

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

 .sub-border{

     border: 1px solid #408080;

     border-radius: 10px;

     background-color: #33ff9a;

     overflow-y:auto;

     overflow-x:hidden;

 }

 p{

     margin: 0 100px;

 }

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

 (function($){

     var setting = {

 //            check: {

 //                enable: true,

 //                chkboxType:{ "Y":'ps', "N":'ps'}

 //            },

             data: {

                 simpleData: {

                     enable: true ,

                     idKey:"id",

                     pIdKey:"parentId",

                     rootPId:-1

                 }

             }

         };

     var zNodes = [{"id" : 0, "name": "信息中心", "parentId": -1},

                   {"id" : 1, "name": "DIV", "parentId": 0},

                   {"id" : 2, "name": "CSS", "parentId": 0},

                   {"id" : 3, "name": "Height", "parentId": 0}];

     var mTree;

     $(function(){

         $.fn.zTree.init($("#myTree"), setting, zNodes);

         mTree = $.fn.zTree.getZTreeObj("myTree");

     })

     $(function(){

         var hw = $(window).height();

         var hs = window.screen.height;

         var hd = document.documentElement.clientHeight;

         console.log(hw);

         console.log(hs);

         console.log(hd);

         $(".sub-border").css("height", hw);

         $(window).resize(function() {

             hw = $(window).height();

             $(".sub-border").css("height", hw);

         });

     })

 })(jQuery)

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

最终的效果如下：

控制DIV占满屏幕的更多相关文章

  1. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  2. video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  3. Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满屏幕

    Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满 ...

  4. 自定义Dialog宽度占满屏幕

    一.自定义Dialog继承Dialog public class MyDialog extends Dialog { 二.为Dialog设置样式 在style中建立新样式继承 @android:sty ...

  5. 占满屏幕的宽高,当把textarea换成其他标签的时候，怎么才能编辑?

    $('.nav').width($(window).width()); $('.nav').height($(window).height());   当把textarea换成其他标签的时候,怎么才能 ...

  6. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  7. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  8. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  9. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. magento二次开发的基本步骤分享

    Magento后台添加新模块的体会 确定命名空间(Namespace)和模块(Modulename)的命名: 在app/etc/modules/ 路径下,创建 Namespace_Modulename ...

  2. 【转】oracle job相关内容

    每天凌晨2点执行是这样的 dbms_job.submit(v_job,'lv;',TRUNC(sysdate+1)+2/24,'TRUNC(sysdate+1)+2/24'); 还有定义JOB最好是这 ...

  3. C++学习笔记35:函数模板

    函数模板 函数模板的目的 设计通用的函数,以适应广泛的数据型式 函数模板的定义格式 template<模板型式参数列表>返回值型式 函数名称(参数列表): 原型:template<c ...

  4. 【题解】【BT】【Leetcode】Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  5. 线性函数拟合R语言示例

    线性函数拟合(y=a+bx) 1.       R运行实例 R语言运行代码如下:绿色为要提供的数据,黄色标识信息为需要保存的. x<-c(0.10,0.11, 0.12, 0.13, 0.14, ...

  6. JS基础知识（数据类型）

      1,关于typeof   因为是弱类型语言,而程序代码中又不得不定义出变量的类型所提供出来的方法. 返回的结果如下图:   如下例子: var test = "123"; va ...

  7. 相对URL拼接为绝对URL的过程

    URL有两种方式:绝对的和相对的. 绝对URL中包含有访问资源的所需的全部信息 举一个例子: <HTML> <HEAD><TITLE>Joe's Tools< ...

  8. （实用篇）PHP JSON数组与对象的理解

    在PHP后端和客户端数据交互的过程中,JSON数据中有时格式不定,一会儿是数组,一会儿是对象,弄得客户端开发人员要崩溃的感觉. 因此,前后端相关人员先对PHP的json_encode函数原理有必要的了 ...

  9. [转]CentOS6.3安装JDK和环境配置

    转自:http://www.linuxidc.com/Linux/2012-09/70780.htm 1.CentOS默认情况下,会安装OpenOffice之类的软件,这些软件需要Java的支持,默认 ...

  10. POJ 3259 Wormholes （Bellman_ford算法）

    题目链接:http://poj.org/problem?id=3259 Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...