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

Question

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

オブジェクトの自動高さが必要です。 DIVはトップ画面から約300ピクセルから始まり、高さはブラウザ画面の最下部まで伸びるはずです。コンテナDIVの最大高さを持っているので、divの最小高さがなければなりません。私はCSSでそれを制限し、DIVのサイズ変更を処理するためにJavascriptを使用することができると信じています。

私のjavascriptはそれほど良いものではありません。私のためにこれを行うことができる簡単なスクリプトがありますか？

編集： DIVには、独自のオーバーフロー処理（独自のスクロールバーを実装）するコントロールがあります。

Answer 1

このシンプルな、特定の機能：それは（あなたの300のピクセルの変更の場合には）指定された身体の上から現在までの距離に依存しない

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

。

---

EDIT：ところで、あなたはもちろん、そのためにイベントハンドラを配線する必要がありますので、そのdivの上で、ユーザーがブラウザのサイズを変更するたびに、これを呼び出すしたいと思います。マイナーな修正で

Answer 2

オーバーフローの場合はどうなりますか？あなたはそれだけで、ウィンドウの一番下に取得したい場合は、絶対位置を使用します。

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

これは、それぞれの側からして、画面の上から300ピクセルをDIVの30pxを入れ、底部と面一になります。内容がdivより大きい場合を処理するためにoverflow:auto;を追加します。

---

編集：@誰でもこれをマークして、説明がうまくいくはずです...答えに何か間違っていますか？

Answer 3

DIVには、独自のオーバーフロー処理を行うコントロールがあります。私はあなたが求めているものを理解していれば

Answer 4

が、これはトリックを行う必要があります。

// 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"; 

Answer 5

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

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

Answer 6

：

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

Answer 7

最も単純な私が出てくる可能性が...

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

は、今あなたがしなければならないすべてはあなたがそれだと（自動サイズ調整したいすべてのものにresizableHeightクラスを追加することです親）。高さまたは幅のいずれかのために、@ジェイソン・ホオジロ、同じことに触発さ

Answer 8

：

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