HTML部分视口的100％高度 [英] HTML sections 100% height of viewport

问题描述

我试图建立一个单页网站（5）。我试图使每个部分的窗口的100％宽度和高度。因此，即使窗口已调整大小，部分大小也适应它。

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

解决方案

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

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

vh：视口高度的1/100。

vw： / strong>视口宽度的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 ：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％;宽度：100％; margin：0;} section {height：100％; width：100％;} section：nth-​​child（1）{background：lightblue;} section：nth-​​child（2）{background：lightgreen;} section： nth-child（4）{background：red;} section：nth-​​child（5）{background：yellow;}  

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

I'm trying to build a one page website with sections (5). I'm trying to make each section 100% width and height of the window. So even if window is resized, the section size adapts to it.

I've heard about JavaScript but I didn't find any good solution. Can somebody help me? Is it possible with media queries?

解决方案

This can be done in CSS alone, no Javascript required.

The correct way is to use the vh and vw units:

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

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

As such, giving the element you wish to be 100% as high as the viewport a height setting of 100vh will give you what you're after.

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>

Alternatively, you will need to set the dimensions of the element relative to the parent html and body elements, which will need to have a height of 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％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！