首页 > 编程 > JavaScript > 正文

JS实现DIV高度自适应窗口示例

2019-11-19 17:32:59
字体:
来源:转载
供稿:网友

本文实例讲述了JS实现DIV高度自适应窗口。分享给大家供大家参考,具体如下:

<!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 runat="server">  <title></title>  <style type="text/css">    *.    {      margin: 0;      padding: 0;    }  </style>  <script type="text/javascript">    window.onload = windowHeight; //页面载入完毕执行函数    function windowHeight() {      var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度      var bodyHeight = document.getElementById("divContent"); //寻找ID为content的对象      bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象    }    setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数  </script></head><body>  <form id="form1" runat="server">    <div id="divContent" style="background-color: Gray;border:1px solid blue;">Test</div>  </form></body></html>

PS:高度自适应应用广泛,本站的很多在线工具也使用了这一技巧,列举如下几个工具供大家参考:

JavaScript在线格式化工具(基于beautify.js插件):
http://tools.VeVB.COm/code/js_beautify

在线颜色选择器工具/RGB颜色查询对照表:
http://tools.VeVB.COm/color/colorpicker

在线个人所得税计算器:
http://tools.VeVB.COm/jisuanqi/tax_calc

宋词在线查询:
http://tools.VeVB.COm/bianmin/songci

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表