コンテンツに合わせて動的にサイズを変更します

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

  •  25-09-2019
  •  | 
  •  

質問

現在、多くのCFWINDOWオブジェクトを使用するサイトで作業していますが、スクロールバーを必要とせずにすべてのコンテンツが適合するように、ウィンドウを動的にサイズ変更する方法を知っている人がいるのではないかと考えていました。

オーバーフロー=可視構成を使用してみましたが、違いはないようです。

アドバイスをお寄せいただきありがとうございます。

役に立ちましたか？

解決

まあ、これは画像を表示するためにポップアップを使用するときの一種の古典的なタスクです。画像サイズを測定し、産卵したウィンドウのサイズを使用して行われました window.resizeBy(w,h). 。これはまだ適用可能な方法だと思います。

2番目の同様のオプションは、サーバー側の必要なサイズを計算し、 cfwindow 属性 width と height. 。たとえば、コンテンツをにキャプチャできます cfcontent 文字の長さを確認します。

テキストコンテンツを使用している場合、これらの両方のメソッドは信頼できないことに注意してください。フォントをレンダリングすることはユーザーにとって本当に異なる可能性があるためです。したがって、追加の高さを予約することは有用です。

他のトリッキーな方法は、すでに開いているウィンドウがあるため、スクロールバーが存在するかどうかを確認することです。属性があります scrollHeight あなたが比較することができます clientHeight 高さを増やします。これは、一部のブラウザで醜い「ジャンプ」エフェクトを生成する可能性がありますが、機能するはずです。

私は興味があり、最後の方法のクイックテストを試みました。最初にw/h = 200とこの回答テキスト（上記の単語）を含むポップアップを最初に産みました。次に、ポップアップウィンドウでこれを行いました。

<script type="text/javascript">
window.onload = function() {

    // check the size before resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

    if (window.innerHeight < document.body.scrollHeight) {
        // here's where we can play with resize steps and other specific trickery
        // now we're trying to expand size a bit
        window.resizeBy(window.innerWidth + 50, window.innerHeight + 50);
    }

    // check the size after resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

}
</script>

アラート＃1：

Window Width = 200
Window Height = 200
ScrollHeight =  783

アラート＃2：

Window Width = 450
Window Height = 450
ScrollHeight =  358

私は100％確信がない（そして今はチェックできない）ことに注意してください window.innerWidth/Height 属性はIEで機能します - あなたも考慮する必要があります document.documentElement.clientWidth/Height 属性。

お役に立てれば。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top