lvh, svh, dvh

<main>
  <fieldset>
    <legend>Unit</legend>
    <div>
      <div>
        <input id="vh" value="vh" name="unit" type="radio" checked>
        <label for="vh">vh</label>
      </div>
      <div>
        <input id="lvh" value="lvh" name="unit" type="radio">
        <label for="lvh">lvh</label>
      </div>
      <div>
        <input id="svh" value="svh" name="unit" type="radio">
        <label for="svh">svh</label>
      </div>
      <div>
        <input id="dvh" value="dvh" name="unit" type="radio">
        <label for="dvh">dvh</label>
      </div>
      <div>
        <input id="fixed" value="fixed" name="unit" type="radio">
        <label for="dvh">fixed(3000px)</label>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <label for="none">Show Keyboard</label>
    <input type="text" id="none" placeholder="placeholder" required/>
  </fieldset>
</main>
<style>
  main {
    padding: 1rem;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.12) 10px, rgba(0, 0, 0, 0.12) 11px );
  }
  main > fieldset {
    margin-bottom: 1rem;
  }
  main > fieldset:last-child {
    margin-bottom: 0;
  }
  main:has(input[value="vh"]:checked) {
    height: 100vh;
  }
  main:has(input[value="lvh"]:checked) {
    height: 100lvh;
  }
  main:has(input[value="svh"]:checked) {
    height: 100svh;
  }
  main:has(input[value="dvh"]:checked) {
    height: 100dvh;
  }
  main:has(input[value="fixed"]:checked) {
    height: 3000px;
  }
  fieldset {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    padding: 1rem;
    background-color: white;
  }
</style>