CSS：使DIV的最大高度等于“窗口高度 – 100px”

在本文中，我们将介绍如何使用CSS将DIV元素的最大高度设置为“窗口高度减去100px”。这种技术可以用于创建自适应的布局，确保页面内容在任何时候都能正常显示，并且不会超出可见区域。

阅读更多：CSS 教程

使用`vh`单位

CSS提供了一种特殊的单位vh，表示相对于视口高度的百分比。视口高度是指浏览器窗口的高度，不包括工具栏、滚动条等。我们可以使用vh单位来设置DIV元素的高度，并通过计算将其最大高度设置为“窗口高度减去100px”。

以下是示例代码：

div {
  height: calc(100vh - 100px);
  max-height: calc(100vh - 100px);
  background-color: lightgray;
}

在上面的示例中，我们使用了calc()函数来进行计算。calc()函数可以在CSS中进行简单的数学运算。我们将100vh（视口高度）减去100px，然后将结果应用于DIV元素的高度和最大高度。这样，DIV元素的高度将随着视口高度的变化而自动调整，并始终保持在“窗口高度减去100px”的范围内。

通过将DIV元素的背景色设置为lightgray，我们可以清晰地看到DIV的高度是如何自适应的。

请注意，使用vh单位时要考虑兼容性问题。一般来说，大多数现代浏览器都支持vh单位，但在某些旧版本浏览器中可能会出现兼容性问题。所以，在使用vh单位时最好进行测试，并考虑使用备用方案。

使用JavaScript获取窗口高度

除了使用vh单位，我们还可以使用JavaScript来获取窗口的高度，并动态地将DIV元素的最大高度设置为“窗口高度减去100px”。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      max-height: calc(100vh - 100px);
      background-color: lightgray;
    }
  </style>
  <script>
    function setDivHeight() {
      var windowHeight = window.innerHeight;
      var divHeight = windowHeight - 100;
      document.getElementById('myDiv').style.maxHeight = divHeight + 'px';
    }

    window.addEventListener('load', setDivHeight);
    window.addEventListener('resize', setDivHeight);
  </script>
</head>
<body>
  <div id="myDiv"></div>
</body>
</html>

在上面的示例中，我们通过JavaScript定义了一个名为setDivHeight()的函数。该函数使用window.innerHeight获取窗口的高度，并将其减去100，然后将结果应用于DIV元素的最大高度。

我们使用window.addEventListener()添加了两个事件监听器。第一个事件监听器在页面加载完成后立即调用setDivHeight()函数，以确保DIV的最大高度正确地设置为初始窗口高度减去100px。第二个事件监听器在窗口大小变化时调用setDivHeight()函数，以便在窗口大小改变时更新DIV的最大高度。

通过运行上面的示例代码，我们可以看到DIV元素的最大高度与“窗口高度减去100px”保持一致，并且在窗口大小改变时能够自动调整。