jQueryスクリプトは私にwierdの値を与えます

Question

私のコンテンツdivのスクロールバーが必要かどうかをチェックし、ビューポートの高さに基づいてdivにoverflow-yとmax-heightを設定するjQueryスクリプトを作っています。しかし、私はビューポートの高さと私のページの高さを確認する警告を行うときにいくつかの厄介な結果を取得しています。私の場合のstatmentはif（サイトの高さ>ビューポートの高さ）{値の設定}でも、私はいつも、ビューポートの高さ>サイトの高さを警告し、ifを実行して値を設定します。

誰がそれを必要とする必要がある場合は、これは作業コードです（オーバーフロー：自動車は、スクロールバーとコンテンツボックスに必要とされているとオーバーフロー：隠されたが、HTMLで必要とされ、ボディ）

// Calculate site height to check if the content_box needs a scroll bar. 
function calculate_site_height() { 
    // Set variables needed 
    var header = $('#header'); 
    var footer = $('#footer'); 
    var wrapper = $('#wrapper'); 
    var content_box = $('#content_box'); 
    var win = $(window); 
    // Set max max height. (+5 to get some margin from footer) 
    var max_height = win.height() - (header.height() + footer.height() +5); 
    // Check if the site height is bigger then viewport height. And then set max height to trigger the scrollbar if needed 
    if (wrapper.height() > win.height()) { 
    content_box.css('max-height', max_height + 'px'); 
    } 
    // Set the max height of the content box without triggering the scrollbar 
    else { 
    content_box.css('max-height', max_height + 'px'); 
    } 
} 
// Trigger the fuction calculate_site_height() 
$(window).ready(calculate_site_height).resize(calculate_site_height); 

Answer 1

あなたのラッパーは、追加したテキスト行数が多いため、実際には多くの場合、という大きなサイズです。

あなたの条件付きの内部content_box.css('max-height', max_height + 'px')が、前を設定しているので、あなたの値アウトalert()、条件付きのトリガ、は、あなたのラッパーはあなたの窓より低いに縮小、あなたは出力更新された値を参照してくださいalert()にあります。ラッパーが実際のロジックは、条件内のステップ正しかったことを示しているウィンドウよりも大きいところ前に、あなたのalert()を実行

あなたcontent_box.css('max-height', max_height + 'px')は、変更前の値を示しています。

です。

・ホープこのことができます:)

Answer 2

をあなたは、単にdiv要素に固定の高さを追加してもオーバーフロー-Yを追加することにより、スクロールバーを作ることができます：自動;

プログラムまたはブラウザは、コンテンツがコンテナ内に収まらない場合ことを知っているので、キーの幅と高さにあるスクロールバーを活性化することで

#content_box { 
 
    width:100%; 
 
    height:500px; /*altura fija*/ 
 
    overflow:auto; 
 
    text-align: center; 
 
}

：と。 あなたが探しているものがjavascriptで行う必要がある場合は、より複雑にすることですが、賢明に使用するとCSSがうまく機能します。

私はそれがあなたに役立つことを願っています。