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>
    

      

  • 相关阅读:
    Tomcatd断点调试Debug
    idea怎么部署Servlet
    ECMAScript基本语法——①与HTML的结合方式
    JavaScript简介
    程序员找工作,应该怎么应对面试官?
    你所未知的3种 Node.js 代码优化方式
    对 APM 用户的一次真实调查分析(上)
    Datadog Agent是啥?它消耗什么资源?
    Python 全栈开发 -- 开发环境篇
    成为运维界的「福尔摩斯」,你还需要3个帮手!
  • 原文地址:https://www.cnblogs.com/yinwei-space/p/10389271.html
Copyright © 2011-2022 走看看