zoukankan      html  css  js  c++  java
  • div高度随浏览器窗口高度变化;

    通过实际测试,按照网上的说法通过设置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>
    

      

  • 相关阅读:
    PHP面向对象之事务脚本模式
    PHP面向对象之页面控制器
    PHP面向对象之前端控制器模式
    oracle sql分页的写法示例
    PHP面向对象之注册表模式
    PHP面向对象之命令模式
    opencv中Mat类型数据操作与遍历
    Anisotropic gauss filter
    opencv 批量图像读写
    HSV颜色识别demo
  • 原文地址:https://www.cnblogs.com/yinwei-space/p/10389271.html
Copyright © 2011-2022 走看看