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>

HTML部分100％视口高度

1 个答案: