通过实际测试，按照网上的说法通过设置html,body{height: 100%；}, 然后让div以100%继承body的高度，这种做法是错误的，必须得上级有个设置固定的高度。

原生js代码（参照网上代码）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	.content{  display:table;}

	.cell{ display:table-cell; vertical-align:middle;}

</style>

</head>

<body>

<div  class="content" id="test">

	<div class="cell">niaho</div>

</div>

<script type="text/javascript">

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.getElementById("test").style.height = winHeight + 'px';

alert(winHeight);

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

　　

div高度随浏览器窗口高度变化；的更多相关文章

  1. 让div垂直居中于浏览器窗口

    <style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin ...

  2. CSS实现子级窗口高度随低级窗口高度变化

    纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助 ...

  3. 常用高度——获取浏览器窗口的高度（jquery和js）

    一:针对浏览器的常用高度 jquery的用法: <script type="text/javascript"> $(document).ready(function() ...

  4. CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致

    纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助 ...

  5. vue动态监听浏览器窗口高度

    HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted( ...

  6. 用jQuery监听浏览器窗口的变化

    $(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...

  7. div自动适应浏览器窗口水平和垂直居中

    html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} ...

  8. vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高

    1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...

  9. 用JS来控制 div的高度随浏览器变化而变化

    <div id="test" style=" border: solid 1px #f00; "></div> <script t ...

随机推荐

  1. 如何解决分配到Autoconfiguration IPV4 地址

    配置完服务器静态IP后,在CMD窗口中查看ip地址,发现是Autoconfiguration IPV4. 上网搜索了,是关于虚拟服务器的,但是我没有配置虚拟服务器,有点奇怪. 使用下面的教程,可以解决 ...

  2. 对java中的equals()方法的总结

    Java的基础学习总结--equals方法 一,等于方法介绍 1.1.通过下面的例子掌握等于的用法 1 package cn.galc.test; 2 3 public class TestEqual ...

  3. layui中弹出层的两种表达方式

    方式一: 定义js中定义html变量 方式二: 设置div :hidden:hidden 布局 数据表格自适应大小: 代码: <style> .btn-container { margin ...

  4. SQLServer之修改触发器

    修改触发器规则 修改CREATE TRIGGER语句以前创建的 DML.DDL 或登录触发器的定义.触发器是通过使用CREATE TRIGGER创建的.这些触发器可以由Transact-SQL语句直接 ...

  5. 【Teradata SQL】创建数据库和表

    1.数据库perm大小为10G Create database testbase as perm=10E9,spool=10E9; 2.创建物理表 create multiset table stg( ...

  6. 【English】20190315

    accelerate 加速 [ækˈsɛləˌret]  Our goal is to help you be more successful in your role and work togeth ...

  7. Ambari——大数据平台的搭建利器之进阶篇

    前言 本文适合已经初步了解 Ambari 的读者.对 Ambari 的基础知识,以及 Ambari 的安装步骤还不清楚的读者,可以先阅读基础篇文章<Ambari——大数据平台的搭建利器>. ...

  8. centos docker 安装

    centos docker 安装 参考网站 https://docs.docker.com/install/linux/docker-ce/centos/ 1.删除原有docker $ sudo yu ...

  9. 使用 Linux 文件恢复工具

    使用 Linux 文件恢复工具         Linux 文件恢复的原理 inode 和 block 首先简单介绍一下 Linux 文件系统的最基本单元:inode.inode 译成中文就是索引节点 ...

  10. 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...