js div自适应屏幕高度

基础概念

在JavaScript中，实现一个div元素自适应屏幕高度通常涉及到获取屏幕的高度，并将这个值设置为div的高度。这可以通过监听窗口的resize事件来实现，以便在窗口大小变化时更新div的高度。

优势

用户体验：自适应高度的div可以确保内容在不同设备和屏幕尺寸上都能得到良好的展示。
响应式设计：有助于构建响应式网站，使网站能够适应各种屏幕大小和设备。
减少滚动：通过合理设置高度，可以减少页面的垂直滚动，提升用户体验。

类型

固定高度：设置一个固定的像素值作为div的高度。
百分比高度：使用百分比来定义div的高度，使其相对于父元素或视口高度进行缩放。
JavaScript动态高度：使用JavaScript根据屏幕或窗口大小动态计算并设置div的高度。

应用场景

全屏布局：当需要一个元素占据整个屏幕时，可以使用自适应高度。
移动优先设计：在移动设备上，确保内容不会因为屏幕尺寸小而被截断。
动态内容展示：当div内的内容长度不固定时，自适应高度可以确保所有内容都能显示出来。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript使div元素自适应屏幕高度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应高度的div</title>
<style>
  #adaptiveDiv {
    width: 100%;
    background-color: lightblue;
  }
</style>
</head>
<body>

<div id="adaptiveDiv">这是一个自适应高度的div。</div>

<script>
  function setDivHeight() {
    var div = document.getElementById('adaptiveDiv');
    div.style.height = window.innerHeight + 'px';
  }

  // 初始设置高度
  setDivHeight();

  // 监听窗口大小变化事件
  window.addEventListener('resize', setDivHeight);
</script>

</body>
</html>