JavaScript

超轻量级php框架startmvc

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

更新时间:2020-04-23 08:35:02 作者:startmvc
本文实例讲述了JS实现DIV高度自适应窗口。分享给大家供大家参考,具体如下:<!DOCTYPEhtml

本文实例讲述了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.jb51.net/code/js_beautify

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

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

宋词在线查询: http://tools.jb51.net/bianmin/songci

JS DIV 高度 自适应 窗口