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

StackOverflow https://stackoverflow.com/questions/33080

  •  09-06-2019
  •  | 
  •  

質問

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

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

私の JavaScript は、期待されるほど優れていません。これを行う簡単なスクリプトはありますか?

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

役に立ちましたか？

解決

このシンプルで具体的な関数を試してください。

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");
}

これは、指定されているボディの上部からの現在の距離には依存しません (300 ピクセルが変更された場合)。

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

他のヒント

オーバーフローの場合はどうすればよいでしょうか?ウィンドウの一番下に配置したい場合は、絶対配置を使用します。

div {
  position: absolute;
  top: 300px;
  bottom: 0px;
  left: 30px;
  right: 30px;
}

これにより、DIV が各側から 30 ピクセル、画面の上部から 300 ピクセルの位置に配置され、下部と同じ高さになります。を追加 overflow:auto; コンテンツが div よりも大きい場合を処理するため。

編集：@これをマークした人は誰でも、説明があればいいのですが...何か答えが間違っていますか？

document.getElementById('myDiv').style.height = 500;

これは、オブジェクトの高さを動的に調整するために必要な非常に基本的な JS コードです。私はまさにこれを、自動高さプロパティがある場所で実行しましたが、経由でコンテンツを追加すると、 XMLHttpRequest 親 div のサイズを変更する必要がありましたが、IE6/7 と FF3 ではこの offsetheight プロパティがうまくいきました。

DIV には、独自のオーバーフロー処理を行うコントロールが格納されています。

あなたが何を求めているのか理解できれば、これでうまくいくはずです。

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("yourDiv").height = windowHeight - 300 + "px";

軽微な修正を加えて:

function rearrange()
{
var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined'
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop  - 6)+ "px";
}

私が思いつく最も簡単な...

function resizeResizeableHeight() {
    $('.resizableHeight').each( function() {
        $(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
    });
}

あとは、自動サイズ変更したいすべてのもの (その親) に resizableHeight クラスを追加するだけです。

@jason-bunting からインスピレーションを得たもので、高さでも幅でも同じです。

function resizeElementDimension(element, doHeight) {
  dim = (doHeight ? 'Height' : 'Width')
  ref = (doHeight ? 'Top' : 'Left')

  var x = 0;
  var body = window.document.body;
  if(window['inner' + dim])
    x = window['inner' + dim]
  else if (body.parentElement['client' + dim])
    x = body.parentElement['client' + dim]
  else if (body && body['client' + dim])
    x = body['client' + dim]

  element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top