HTML部分100％视口高度[重复]

Question

我正在尝试构建一个包含部分 (5) 的单页网站。我正在尝试使每个部分的窗口宽度和高度为 100%。因此，即使调整窗口大小，节大小也会适应它。

我听说过 JavaScript，但没有找到任何好的解决方案。有人可以帮助我吗？媒体查询可以吗？

Answer 1

注意：vh 仅适用于笔记本电脑和更大的屏幕尺寸，因为对于较小的移动屏幕，vh 还会考虑显示网站的浏览器窗口以及浏览器窗口上方的音量、电池等项目。

这可以单独在 CSS 中完成，不需要 Javascript。

正确的方法是使用vh and vw units:

vh：视口高度的 1/100。

vw：视口宽度的 1/100。

因此，将您希望与视口高度 100% 的元素设置为 100vh 的高度设置将为您提供所需的内容。

html,
body {
  height: 100%;
  margin: 0;
}
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

或者，您需要设置元素相对于父html 和body 元素的尺寸，这需要100% 的高度：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
section {
  height: 100%;
  width: 100%;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>