English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

js example of DIV height adapting to window

This example shows how to implement height adaptation of DIV using JavaScript. Shared for everyone's 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; //Execute the function when the page is fully loaded
    function windowHeight() {
      var h = document.documentElement.clientHeight; //Get the current visible operating area height of the window
      var bodyHeight = document.getElementById("divContent"); //Find the object with ID 'content'
      bodyHeight.style.height = (h - 25) + "px"; //The object you want to adapt to height
    }
    setInterval(windowHeight, 500)//Execute the windowHeight function every half second
  </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 applications are widely used, and many online tools on this site also use this technique. The following are several tools for your reference:

JavaScript Online Formatting Tool (based on beautify.js plugin):
http://tools.jb51.net/code/js_beautify

Online Color Picker Tool/RGB Color Lookup Table:
http://tools.jb51.net/color/colorpicker

Online Personal Income Tax Calculator:
http://tools.jb51.net/jisuanqi/tax_calc

Online Search for Songci:
http://tools.jb51.net/Bianmin/Songci

Readers who are interested in more about JavaScript-related content can check the special topics on this site: 'Summary of JavaScript DOM Manipulation Techniques', 'Summary of JavaScript Array Manipulation Techniques', 'Summary of JavaScript Sorting Algorithms', 'Summary of JavaScript Traversal Algorithms and Techniques', 'Summary of JavaScript Mathematical Operation Usage', 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Search Algorithm Techniques', and 'Summary of JavaScript Error and Debugging Techniques'.

I hope the content described in this article will be helpful to everyone in designing JavaScript programs.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

You May Also Like