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

问题描述

我正在尝试构建一个包含部分 (5) 的单页网站.我试图使窗口的每个部分都具有 100% 的宽度和高度.所以即使调整窗口大小，部分大小也会适应它.

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.

我听说过 JavaScript，但没有找到任何好的解决方案.有人可以帮助我吗?是否可以使用媒体查询?

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

推荐答案

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

NB: vh works only for laptops and bigger screen sizes because for mobile screens which are smaller the vh also takes into account the browser window which shows the website and the items such as the volume, battery, etc above the browser window.

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

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

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

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

vh:视口高度的 1/100.

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

vw:视口宽度的 1/100.

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

因此，为您希望与视口一样高的元素提供 100vh 的高度设置将满足您的需求.

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>

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

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屋！