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

下面我将为你详细讲解“JS实现DIV高度自适应窗口示例”的完整攻略。

步骤一：设置DIV的CSS样式

首先，我们需要设置DIV的CSS样式，让它具备自适应窗口高度的能力，代码如下：

div{
  height: auto; /*设置DIV高度自适应窗口*/
  min-height: 100%; /*设置DIV最小高度为100%*/
}

步骤二：使用JS动态计算DIV高度

虽然我们已经将DIV的高度设置为自适应窗口，但是这样并不能完全实现我们的目标。因为如果我们在页面上加入了很多元素，页面的高度会增加，而DIV的高度并不能自适应变化。因此，我们需要使用JS动态计算DIV的高度，确保它始终自适应窗口高度。

代码示例一：

window.onload = function(){
  var div = document.getElementsByTagName('div')[0];/*获取第一个DIV元素*/
  div.style.height = document.documentElement.clientHeight + 'px';/*设置DIV高度为窗口高度*/
  window.onresize = function(){/*当窗口大小改变时*/
     div.style.height = document.documentElement.clientHeight +'px';/*动态计算DIV高度并设置*/
  }
}

代码示例二：

window.onload = function(){
  var div = document.getElementsByTagName('div')[0];/*获取第一个DIV元素*/
  div.style.height = window.innerHeight + 'px';/*设置DIV高度为窗口高度*/
  window.onresize = function(){/*当窗口大小改变时*/
     div.style.height = window.innerHeight +'px';/*动态计算DIV高度并设置*/
  }
}

以上两个代码示例都是使用JS动态计算DIV的高度，并且在窗口大小改变时，动态更新DIV的高度，确保它始终自适应窗口高度。

完成以上两个步骤后，我们就成功实现了“JS实现DIV高度自适应窗口示例”的攻略。