マイライブラリドキュメント

マルチルートサイドバー

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

動的高さ

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


役割

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

ボディ高さの同期

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

tsx
特定のターゲットの同期

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

tsx
測定方法

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

プロップス

extraHeight

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

extraHeightUnit

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

targetRef

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

© 2026 Byeolnaerim. 無断転載を禁じます。紹介プライバシーポリシー