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="fixed">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 1%, rgba(0, 0, 0, 0.12) 1%, rgba(0, 0, 0, 0.12) 1.4% );
  }
  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 {
    display: grid;
    gap: .4rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    padding: 1rem;
    background-color: white;
    border-radius: 1rem;
  }

  input[type="text"] {
    appearance: none;
    outline: none;
    padding: 0.5rem;
    border: 1px solid gainsboro;
    font-size: 1rem;
    border-radius: 0.5rem;
  }

  input[type="text"]:placeholder-shown {
    background-color: transparent;
  }

  input[type="text"]:user-invalid {
    border: 1px solid red;
  }

  input[type="text"]:focus-visible {
    background-color: rgba(255, 255, 255, .5);
    border: 2px solid cornflowerblue;
  }
</style>