关于javascript：HTML部分100％视口高度

HTML sections 100% height of viewport

本问题已经有最佳答案，请猛点这里访问。

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

我听说过javascript，但没有找到任何好的解决方案。有人能帮我吗？是否可以进行媒体查询？

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

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

正确的方法是使用vh和vw单元：

vh: 1/100th of the height of the viewport.

vw: 1/100th of the width of the viewport.

号

因此，如果将希望高达视区100%的元素设置为100vh的高度，将提供所需的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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;
}

1
2
3
4
5

号

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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;
}

1
2
3
4
5

号