動的高さ

ウィンドウスクロールベースのレイアウトで、targetの高さをビューポートとコンテンツの高さに合わせて同期します。

役割

FlexLayoutDynamicHeightは高さが指定されない動的コンテンツのために作業されました。対象要素の 高さと 最小高さ実際のコンテンツの高さとビューポートの基準最小高さを同期させ、ブラウザの ウィンドウ スクロール高さが安定して計算されるようにします。

ボディ高さの同期

このケースでは targetRefを渡さない場合、アンカーの親要素である ボディがターゲットになります。

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutDynamicHeight,
} from "@byeolnaerim/flex-layout";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <FlexLayoutDynamicHeight />

        <FlexLayout
          direction="column"
          layoutName="root"
          scrollMode="window"
        >
          <FlexLayoutContainer containerName="head">
            <Header />
          </FlexLayoutContainer>

          <FlexLayoutContainer containerName="body">
            {children}
          </FlexLayoutContainer>
        </FlexLayout>
      </body>
    </html>
  );
}

特定のターゲットの同期

targetRefを渡すと、親ではなくその要素の高さを同期します。ウィンドウスクロールを使用するシェル、ポータルルート、別のドキュメント領域のように高さが指定されていない（自動）動的高さコンテンツで、スクロール高さを安定させる必要がある要素に使用できます。

tsx

"use client";

import { FlexLayoutDynamicHeight } from "@byeolnaerim/flex-layout";
import { useRef } from "react";

export default function DocumentShell({ children }: { children: React.ReactNode }) {
  const shellRef = useRef<HTMLDivElement | null>(null);

  return (
    <div ref={shellRef}>
      <FlexLayoutDynamicHeight targetRef={shellRef} />
      {children}
    </div>
  );
}

測定方法

測定時にターゲットの高さを一時的に 自動解除し、 scrollHeightビューポートの高さ、パディング、ボーダー、最後の子のボトムマージンを反映して次の高さと 最小高さを計算します。DOMの変更、リサイズ、visualViewportのリサイズ/スクロール、フォントの読み込み完了時に再測定します。

直接スタイルを操作します

このコンポーネントはターゲット要素のインライン 高さと 最小高さを意図的に変更します。同じスタイルを直接制御するコードがすでにある場合は、同じターゲットに同時に適用しないでください。

プロップス

extraHeight

계산된 height에 추가로 더할 값입니다. 기본값은 0입니다.

extraHeightUnit

extraHeight의 단위입니다. px 또는 %를 사용할 수 있으며 기본값은 px입니다.

targetRef

height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.