javascript - tag - title html w3schools

Secciones HTML 100% altura de la ventana gráfica

Question

Esta pregunta ya tiene una respuesta aquí:

• Haz un div 100% alto de la ventana del navegador 30 respuestas

Estoy tratando de construir un sitio web de una página con secciones (5). Estoy tratando de hacer que cada sección sea 100% del ancho y alto de la ventana. Así que incluso si se cambia el tamaño de la ventana, el tamaño de la sección se adapta a ella.

He oído hablar de JavaScript pero no encontré ninguna buena solución. ¿Puede alguien ayudarme? ¿Es posible con consultas de medios?

Answer 1

Esto se puede hacer solo en CSS, no se requiere Javascript.

La forma correcta es usar las unidades vh y vw :

vh: 1/100 de la altura de la ventana gráfica.

vw: 1/100 del ancho de la ventana gráfica.

Como tal, al darle al elemento que desea que esté 100% tan alto como a la ventana 100vh una altura de 100vh le dará lo que está buscando.

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>

De forma alternativa , deberá establecer las dimensiones del elemento en relación con los elementos html y del body del padre, que deberán tener una altura del 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>