NavBarの高さが変更されたときにコンテンツのサイズを変更する方法

Question

コンテンツを持つページがあり、高さが100％に設定されています。これは素晴らしいです。

ここで、上部にツールバーを追加します。しかし、ツールバーの高さは50pxです。追加すると、ページ上にスクロールバーが表示され、50pxが表示されます。

ツールバーを追加してスクロールバーを取得しないようにするにはどうすればよいですか？

コンテンツエリアへのツールバーの高さの埋め込みを設定しようとしました。これは、ツールバーのサイズが変更されるまで機能します。

たとえば、画面が狭い場合、ツールバーはそれに応じて変更されます。このイベントを特定し、それに応じてパディングを設定できるようにする必要があります。

これを行う方法はありますか？解決の別の方法ですか？

このページはシングルページアプリで、スクロールバーがない場合に最適です。

テーマはいくつかありますが、テーマによっては、CSSによって設定されたツールバーが大きく、実行時に変更されるものもあります。もう一度、私はツールバーのサイズの変化を検出できる必要があります。

Answer 1

ここに私が思いついたTypescriptがあります。

constructor() { 
     this.setContentHeight(); 
     $(window).resize(() => this.setContentHeight()); 
    } 

    setContentHeight() { 
     let headerFooterHeight = $("#navBar").height() + $("#entityShellFooter").height(); 
     let browserWindowHeight = $(window).height(); 
     let contentHeight = browserWindowHeight - headerFooterHeight; 
     $("#entityShellContent").height(contentHeight); 
    } 

とHTML

<header id="navBar">NavBar</header> 

    <div id="entityShellContent"> 
      Content 
    </div> 

    <div id="entityShellFooter" > 
     Status 
    </div>