Of Stack

JS Implementation of DIV Highly Adaptive Window Example

  • 2021-07-21 07:11:48
  • OfStack

In this paper, an example is given to show that JS realizes DIV highly adaptive window. Share it for your reference, as follows: 


<!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; // When the page is loaded, execute the function 
    function windowHeight() {
      var h = document.documentElement.clientHeight; // Gets the height of the visible operation area of the current window 
      var bodyHeight = document.getElementById("divContent"); // Looking for ID For content Object of 
      bodyHeight.style.height = (h - 25) + "px"; // You want to adapt to the height of the object 
    }
    setInterval(windowHeight, 500)// Execute every half second 1 Times windowHeight Function 
  </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: Highly adaptive widely used, many online tools of this site also use this 1 skill, list the following tools for your reference:

JavaScript online formatting tool (based on beautify. js plug-in):
http://tools.ofstack.com/code/js_beautify

Online color picker tool/RGB color query comparison table:
http://tools.ofstack.com/color/colorpicker

Online personal income tax calculator:
http://tools.ofstack.com/jisuanqi/tax_calc

Online inquiry of Song Ci:
http://tools.ofstack.com/bianmin/songci

For more readers interested in JavaScript related content, please check the topics on this site: "Summary of JavaScript Operation DOM Skills", "Summary of JavaScript Array Operation Skills", "Summary of JavaScript Sorting Algorithm", "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Mathematical Operation Usage", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Search Algorithm Skills" and "Summary of JavaScript Error and Debugging Skills"

I hope this article is helpful to everyone's JavaScript programming.

Related articles: