通过实际测试，按照网上的说法通过设置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. mysql安装出现问题（The service already exists）

    1.管理员身份运行cmd(系统win10) 2.输入命令cd /d F:\mysql-5.7.19-win32\bin(此为mysql要安装的目录) 3.输入安装命令mysqld install 出现 ...

  2. 简说raid1 raid2 raid5 raid6 raid10的优缺点和做各自raid需要几块硬盘

    Raid 0:一块硬盘或者以上就可做raid0优势:数据读取写入最快,最大优势提高硬盘容量,比如3快80G的硬盘做raid0 可用总容量为240G.速度是一样.缺点:无冗余能力,一块硬盘损坏,数据全无 ...

  3. 从0开始的Python学习005运算符与表达式

     地三鲜 土豆+茄子+青椒=地三鲜 这就是一个表达式,表达式是由运算符和操作数组成的. 土豆.茄子和青椒是操作数,炒是运算符,而地三鲜就是最后结果也就是这个表达式的值. 表达式 一个表达式可以分解为运 ...

  4. Nagle 算法

    1. Nagel算法        TCP/IP协议中,无论发送多少数据,总是要在数据前面加上协议头,同时,对方接收到数据,也需要发送ACK表示确认.为了尽可能的利用网络带宽,TCP总是希望尽可能的发 ...

  5. 【原】无脑操作：eclipse创建maven工程时，如何修改默认JDK版本？

    问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...

  6. Ubuntu 16.04 使用校园网客户端上网

    对于使用校园网的学生来说,安装好Ubuntu之后,很多人需要用 DrClient 客户端来上网,那么怎么操作呢, 这里介绍 DrClient 客户端在Ubuntu上的使用方法, 首先下载 对应版本的软 ...

  7. RHEL6 SoftRaid 更换故障硬盘

    1.手工fail一块硬盘 #mdadm /dev/md0 -f /dev/sdb 2.移除损坏硬盘: #mdadm /dev/md0 -r /dev/sdb 3.添加新的硬盘到已有阵列 mdadm / ...

  8. 自定义JDBC链接池

    上篇简单介绍了jdbc链接数据库: 本篇就说一下自定义连接池以及增删改查的测试: 自定义连接池 自定义链接池的原因 JDBC连接中用到Connection   在每次对数据进行增删查改 都要 开启  ...

  9. Spring boot admin 节点状态一直为DOWN的排查

    项目中需要监控各个微服务节点的健康状态,找到了spring boot admin这个全家桶监控工具,它其实是Vue.js美化过的Spring Boot Actuator,官方的解释是: codecen ...

  10. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...