控制DIV占满屏幕
网上找了很多帖子，希望是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占满屏幕的更多相关文章
- React里单页面div自适应浏览器高度占满屏幕
可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;
- video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件
video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...
- Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满屏幕
Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满 ...
- 自定义Dialog宽度占满屏幕
一.自定义Dialog继承Dialog public class MyDialog extends Dialog { 二.为Dialog设置样式 在style中建立新样式继承 @android:sty ...
- 占满屏幕的宽高,当把textarea换成其他标签的时候，怎么才能编辑?
$('.nav').width($(window).width()); $('.nav').height($(window).height()); 当把textarea换成其他标签的时候,怎么才能 ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
随机推荐
- 多界面开发 、 导航控制器(NavigationController)
1 VC之间的跳转和正向传值 1.1 问题 在实际的开发中更多的应用都会有多个页面组成,每个页面展示不同的信息,页面之间的跳转是由视图控制器来实现的,本案例实现两个页面的之间的跳转和页面之间的正向传值 ...
- source insight 注册码
分享一下google来的 呵呵 Source Insight,一个无比强大的工具.一个很好的查看代码的工具.到它的官网上去看一下,就知道,世界上基本上所有的大的软件公司,都在用这个工具.习惯了这个工具 ...
- LeetCode Rotate List （链表操作）
题意: 将链表的后面k个剪出来,拼接到前面,比如 1->2->null 变成2->1->null.数字代表一段的意思. 思路: k有3种可能,k>n,k<n,k=n ...
- Day05_JAVA语言基础第五天
1.函数(掌握) 1.概念(掌握) 定义在类中,有特定功能的一小段程序 2.格式(掌握) 修饰符 返回类型 函数名(参数类型 形式参数,...){ 函数体: return 返回值; } 解释: A 修 ...
- Java-->发牌流程修改版
--> 这一次要封装得狠一点... package com.xm.ddz; // 每一张牌的属性 public class Card { private String flowerColor; ...
- 书评<<剑指offer 名企面试官精讲典型编程题>>
前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...
- ResponsiveSlides.js最轻量级的幻灯片插件
摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...
- jq版本1.7以上on方法使用结构
<script> $(function(){ $(document).on(" ...
- c#部分---好题--顺便练练“类的知识”
练习:判断邮箱格式是否正确 //1.有且只能有一个@ //2.不能以@开头 //3.@之后至少有一个. //4.@和.不能靠在一起 //5.不能以.结尾
- ntpdate:no server suitable for synchronization found
Question: 在使用ntpdate同步时间时,出现了no server suitable for synchronization found的报错. 通过ntpdate -d s2m.time. ...