通过实际测试，按照网上的说法通过设置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. ORA-00471: DBWR process terminated with error案例

    每年年底,系统管理员都要组织一次容灾方案的测试.演练.会在一个与生产环境网络隔离的DR环境中,启动各个"生产环境服务器",然后让各路人员参与其中测试.演练容灾方案是否可靠.这次演练 ...

  2. [20190415]10g下那些latch是共享的.txt

    [20190415]10g下那些latch是共享的.txt http://andreynikolaev.wordpress.com/2010/11/23/shared-latches-by-oracl ...

  3. sqlserver 清空数据 主键从1开始

    TRUNCATE  TABLE  TbName   --TbName是表名 表清空数据之后 使新增加的记录保持从1 开始

  4. windows环境下安装yaf框架

    windows环境下安装yaf框架 在windows下安装yaf框架 准备工作: php环境(过程略,wamp,xampp,phpstudy都行,php版本大于5.3) git工具(需要从github ...

  5. JDBC获得连接时报connection refused

    1,检查数据库服务器的IP是否正确. 2,检查用户名密码是否正确. 3,检查SID,获selecte instance_name from v$instance;

  6. vue 快速入门、常用指令（1）

    1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...

  7. C#深度学习の接口传参（interface）-----接口的妙用

    一.接口可以干嘛 我们知道,接口的本质是一个约束规范,委托是方法纵向(形式上)的封装,接口是不同方法横向(广度)的封装 接口中不能有变量,但是可以有属性方法.常见的,我们可以用接口: 1.实现需求方的 ...

  8. pip install urllib3[secure] 报错 error: ffi.h: No such file or directory

    解决 sudo apt-get install build-essential autoconf libtool pkg-config python-opengl python-imaging pyt ...

  9. 多节点,多线程下发订单,使用zookeeper分布式锁机制保证订单正确接入oms系统

    假设订单下发, 采用单机每分钟从订单OrderEntry接口表中抓100单, 接入订单oms系统中. 由于双十一期间, 订单量激增, 导致订单单机每分钟100单造成, 订单积压. 所以采用多节点多线程 ...

  10. JS检测浏览器是否最大化

    function isFullScreen (){     if(         window.outerHeight === screen.availHeight     ){         i ...