CSS 如何将容器DIV的高度设置为窗口高度的100%

在本文中，我们将介绍如何使用CSS将容器DIV的高度设置为窗口高度的100%。

阅读更多：CSS 教程

使用 vh 单位来设置高度

CSS中提供了vh单位，可以用来表示视口高度的百分比。通过将容器DIV的高度设置为100vh，我们可以将其高度设置为窗口高度的100%。

.container {
  height: 100vh;
}

上述代码将使得容器DIV的高度始终保持为窗口高度的100%。无论窗口大小如何改变，容器DIV的高度都会自动调整。

使用绝对定位来设置高度

除了使用vh单位，我们还可以使用绝对定位（position: absolute）来设置容器DIV的高度。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上述代码中，我们首先将html和body元素的高度设置为100%以确保它们的高度与窗口高度相同。然后，通过将容器DIV的位置设置为absolute，并将其top和left属性设置为0，width和height属性设置为100%，使容器DIV的高度与窗口高度一致。

使用绝对定位可以使得容器DIV保持与窗口高度的同步，即使窗口大小发生变化也不会改变。

使用JavaScript来设置高度

如果以上方法无法满足需求，我们还可以使用JavaScript来设置容器DIV的高度。通过获取窗口的高度（window.innerHeight）并将其赋值给容器DIV的style属性中的height属性，可以实现将容器DIV的高度设置为窗口高度的100%。

window.addEventListener('DOMContentLoaded', setContainerHeight);

function setContainerHeight() {
  var container = document.querySelector('.container');
  container.style.height = window.innerHeight + 'px';
}

上述代码中，我们首先使用DOMContentLoaded事件将setContainerHeight函数绑定到页面加载完成的时候。然后，在setContainerHeight函数中，我们通过querySelector方法选择容器DIV的元素，并将窗口的高度赋值给它的style属性中的height属性。

总结

通过使用vh单位、绝对定位或JavaScript，我们可以将容器DIV的高度设置为窗口高度的100%。使用vh单位可以直接在CSS中设置高度，非常简单；使用绝对定位可以在CSS中实现高度同步；使用JavaScript可以动态获取窗口高度并设置容器DIV的高度。根据具体需求选择合适的方法，能够帮助我们实现所需的效果。