☰

DIVの高さを動的に設定する 質問する

tag-icon • tag-icon javascript html css
DIVの高さを動的に設定する 質問する

Web アプリケーションには、ブラウザ ウィンドウの幅に応じて自動的に幅が調整される DIV を含むページがあります。

オブジェクトには自動高さが必要です。DIV は画面上部から約 300 ピクセルの位置から始まり、その高さはブラウザ画面の下部まで伸びる必要があります。コンテナ DIV には最大高さがあるため、div には最小高さが必要です。これを CSS で制限し、JavaScript を使用して DIV のサイズ変更を処理できると思います。

私の JavaScript は期待どおりに機能していません。これを実行できる簡単なスクリプトを書くことはできますか?

編集: DIV には、独自のオーバーフロー処理 (独自のスクロール バーの実装) を実行するコントロールが格納されます。

ベストアンサー1

このシンプルで具体的な機能を試してください:

function resizeElementHeight(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

指定されている本体の上部からの現在の距離には依存しません (300px が変更された場合)。

編集: ちなみに、ユーザーがブラウザのサイズを変更するたびに、その div でこれを呼び出す必要があるため、当然、そのためのイベント ハンドラーを接続する必要があります。

おすすめ記事