how can i use 100% of the viewport height instead of 100vh code example

Example 1: what if i want a section to take the height of a viewport html

/* in css file */

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

Example 2: what if i want a section to take the height of a viewport html

<!--in html file-->
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>