dvh vs svh vs vh — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 100vh vs. svh vs. dvh</h1>
    <p class="pg-sub">
      Drag the scroll slider to collapse the phone's simulated address bar, and watch
      where each viewport unit's box — and the CTA pinned to its bottom — actually ends up.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Simulate scrolling</div>
      <div class="slider-row">
        <span class="hint" style="margin:0">Top of page</span>
        <input type="range" id="scroll" min="0" max="100" value="0" />
        <span class="hint" style="margin:0">Scrolled down</span>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="autoplay">▶️ Auto-scroll</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="0">📱 Fresh page load</button>
        <button class="btn sm" data-preset="50">🌊 Mid-scroll</button>
        <button class="btn sm" data-preset="100">👇 Fully scrolled</button>
      </div>
    </div>

<div class="demo-grid" style="margin-top:16px">
      <div class="panel" style="display:flex; justify-content:center;">
        <div class="phone">
          <div class="lanes">
            <div class="lane">
              <div class="lane-name">vh</div>
              <div class="fill vh" id="fillVh"><span class="cta" id="ctaVh">CTA</span></div>
            </div>
            <div class="lane">
              <div class="lane-name">lvh</div>
              <div class="fill lvh" id="fillLvh"><span class="cta" id="ctaLvh">CTA</span></div>
            </div>
            <div class="lane">
              <div class="lane-name">svh</div>
              <div class="fill svh" id="fillSvh"><span class="cta" id="ctaSvh">CTA</span></div>
            </div>
            <div class="lane">
              <div class="lane-name">dvh</div>
              <div class="fill dvh" id="fillDvh"><span class="cta" id="ctaDvh">CTA</span></div>
            </div>
          </div>
          <div class="toolbar" id="toolbar">ADDRESS BAR</div>
        </div>
      </div>

<div class="panel">
        <div class="panel-label"><span class="n">2</span> What's happening</div>
        <div class="status" id="status">
          <span class="dot info" id="dot"></span>
          <span id="statusText">Address bar fully expanded — this is a fresh page load.</span>
        </div>
        <div class="legend">
          <div class="legend-row vh">
            <span class="swatch"></span> <code>100vh</code> box (largest)
            <span class="legend-verdict" id="verdictVh">—</span>
          </div>
          <div class="legend-row lvh">
            <span class="swatch"></span> <code>100lvh</code> box (= <code>vh</code>)
            <span class="legend-verdict" id="verdictLvh">—</span>
          </div>
          <div class="legend-row svh">
            <span class="swatch"></span> <code>100svh</code> box (smallest, safe)
            <span class="legend-verdict" id="verdictSvh">—</span>
          </div>
          <div class="legend-row dvh">
            <span class="swatch"></span> <code>100dvh</code> box (live-tracking)
            <span class="legend-verdict" id="verdictDvh">—</span>
          </div>
        </div>
        <p class="hint">
          The striped bar at the bottom of the phone is the browser's address bar. It shrinks
          as you "scroll" — exactly like iOS Safari's toolbar collapsing. Watch which CTA chips
          it swallows.
        </p>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.