30

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

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

私のjavascriptは、本来あるべきほど良くありません。これを行う簡単なスクリプトはありますか?

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

4

7 に答える 7

36

この単純で具体的な関数を試してください:

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 でこれを呼び出す必要があるため、もちろん、そのためのイベント ハンドラーを接続する必要があります。

于 2008-08-28T19:11:28.617 に答える
10

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

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

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

編集：@これをマークした人は誰でも、説明がいいでしょう...答えに何か問題がありますか？

于 2008-08-28T18:57:23.410 に答える
6

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

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

于 2008-08-28T19:03:42.630 に答える
0

あなたが求めていることを理解していれば、これでうまくいくはずです：

// 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";
于 2008-08-28T19:02:53.350 に答える
0

@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");
}
于 2016-11-05T04:24:31.877 に答える
0

軽微な修正:

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";
}
于 2009-11-11T23:51:08.337 に答える