test.tsx

const Test = () => {
  return
    (
      <>
        <div className="absolute top-0 right-0 p-4 text-right bg-white">
          ref: {swipeRef.current?.clientHeight}
          <br />
          availHeight: {window.screen.availHeight}
          <br />
          innerHeight: {window.innerHeight}
          <br />
          screen.height: {window.screen.height}
          <br />
          swipeY: {swipeY}
        </div>

        <div className="absolute inset-0 flex space-x-1">
          <div className="bg-red-900 h-[100vh]">100vh</div>
          <div className="bg-red-500 h-[50vh]">50vh</div>
          
          <div className="bg-blue-900 h-[100svh]">100svh</div>
          <div className="bg-blue-500 h-[50svh]">500svh</div>
          
          <div className="bg-green-900 h-[100lvh]">100lvh</div>
          <div className="bg-green-500 h-[50lvh]">50lvh</div>
          
          <div className="bg-purple-900 h-[100dvh]">100dvh</div>
          <div className="bg-purple-500 h-[50dvh]">50dvh</div>
        </div
      </>
    )
}