通过实际测试，按照网上的说法通过设置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. selenium-启动浏览器（二）

    selenium下启动浏览器,有两种方法 以 chromedrvier.exe 为例 1. chromedrvier.exe 与 python 启动程序 python.exe 在同一个目录下则可直接使 ...

  2. t-sql语句创建表（基础）

    create table ta1 (     id int identity(1,2) not null,     name nvarchar(20) not null,     identify v ...

  3. 【转载】xilinx 高速收发器Serdes深入研究

    此篇文章深入浅出介绍了关于高速串行收发器的几个重要概念和注意事项,为方便知识点复习总结和后续查阅特此转载,原文标题及链接为:xilinx 高速收发器Serdes深入研究 - CSDN博客   http ...

  4. LeetCode算法题-N-ary Tree Postorder Traversal（Java实现）

    这是悦乐书的第269次更新,第283篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第136题(顺位题号是590).给定一个n-ary树,返回其节点值的后序遍历.例如,给定 ...

  5. abstract关键字 super 关键字 类与继承

    https://www.cnblogs.com/liubing2018/p/8421319.html https://www.cnblogs.com/dolphin0520/p/3803432.htm ...

  6. 周末班：Python基础之网络编程

    一.楔子 你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据, ...

  7. 完成一个java项目需要的一些基础

    包括  1.eclipse关键字      2.文档注      3. jar包的导出与导入 一.elipse关键字 ctry+t       查看父类 ctry+鼠标光标     查看源代码 二.文 ...

  8. SQL FOREIGN KEY 约束

    SQL FOREIGN KEY 约束 一个表中的 FOREIGN KEY 指向另一个表中的 PRIMARY KEY. 让我们通过一个例子来解释外键.请看下面两个表: "Persons&quo ...

  9. grep -v、-e、-E

    在Linux的grep命令中如何使用OR,AND,NOT操作符呢? 其实,在grep命令中,有OR和NOT操作符的等价选项,但是并没有grep AND这种操作符.不过呢,可以使用patterns来模拟 ...

  10. Redtiger SQL注入练习（一）

    感觉会的东西太少了,以后要多练习,多写博客.要坚持学习,一定不能放弃,为梦想奋斗. redtiger  这个平台早就开始做了,但是才做到第4关.... 第一关: 打开题, 先随便试,后来发现点击 Ca ...