通过实际测试，按照网上的说法通过设置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. Sql Server2014数据库清理日志

    Sql Server2014数据库日志占用特别大,清理方法.直接贴代码 USE[master] GO ALTER DATABASE db_Name SET RECOVERY SIMPLE WITH N ...

  2. mas录屏，带系统声音和麦克风声音

    自带的QuickTime + Soundflower 可完美解决,同时录系统的声音和mic声音,也可以只录系统声音. 安装Soundflower 在应用程序 -> 实用工具,里面找到“音频 MI ...

  3. Bootstrap -- 初见 Bootstrap

    Bootstrap -- 初见 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. ...

  4. LeetCode算法题-Array Partition I（Java实现）

    这是悦乐书的第262次更新,第275篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第129题(顺位题号是561).给定一个2n个整数的数组,你的任务是将这些整数分组为n对 ...

  5. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  6. 这可能是把ZooKeeper概念讲的最清楚的一篇文章

    我本人曾经使用过 ZooKeeper 作为 Dubbo 的注册中心,另外在搭建 Solr 集群的时候,我使用到了 ZooKeeper 作为 Solr 集群的管理工具. 前几天,总结项目经验的时候,我突 ...

  7. day6-基础函数的学习（一）

    今日份目录 1.函数的定义 2.函数的返回值 3.函数的参数 4.函数的局部变量与全局变量 5.名称空间与作用域 6.global与nonlocal 7.高阶函数 继续今日份总结!这个总结也晚了,哎, ...

  8. 01背包问题（动态规划）python实现

    01背包问题(动态规划)python实现 在01背包问题中,在选择是否要把一个物品加到背包中.必须把该物品加进去的子问题的解与不取该物品的子问题的解进行比較,这样的方式形成的问题导致了很多重叠子问题, ...

  9. Mango 基础知识

    1 mongdb和python交互的模块 pymongo 提供了mongdb和python交互的所有方法 安装方式: pip install pymongo 2 使用pymongo 1. 导入pymo ...

  10. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何正确使用三维地图控件和工程树控件

    Skyline TerraExplorer Pro目前正式发布的7.0.1&7.0.2版本,还只是64位的版本, 在Web开发的时候,如何在页面中正确嵌入三维地图控件,让一些小伙伴凌乱了. 下 ...