リサイズウィンドウはdiv要素の未使用領域を残します

Question

私はcssに高さと幅100％のGoogleマップを持っています。

ウィンドウのサイズが変更されたときにマップのサイズを変更するには、次のようにします。 さらにオプションボタンがあると、サイドバーがアクティブになり、マップ（#kaart）のdivもサイズ変更されます。

私はアコーディオンを持っています。このアコーディオンがトグルされ、その高さが窓の高さを超えたときには再び弾圧が行われる。しかし、底部には使用されていないスペースがあります。アコーディオンの一部を閉じると、スクロールバーの幅が使用されないスペースとして残されるため、スクロールバーの幅が再び変化します。

//Variabels 
var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height(); 
var buttonState = false; 

$(window).resize(function() { 
    // resize map when window is resized 
    viewportWidth = $(window).width(); 
    viewportHeight = $("#sidebar").height(); 
    setMapDimensions(); 
}); 

//set map width according to viewport 
function setMapDimensions() { 
    viewportWidth = $(window).width(); 
    if(buttonState == true) { 
     viewportHeight = $("#sidebar").height(); 
     $("#kaart").width(viewportWidth - 221); 
     $("#kaart").height(viewportHeight); 
    } else { 
     viewportHeight = $(window).height(); 
     $("#kaart").width(viewportWidth); 
     $("#kaart").height(viewportHeight); 
    } 
} 

これはどのような考えですか？

http://jsfiddle.net/tDYcX/13/

Answer 1

私はちょうど追加することによってそれを解決するだろう：

overflow-x: hidden; 
overflow-y: visible; 

#sidebarへ

はここjsfiddleデモです。 マップのサイズが変更されずにジャンプします。私の意見では、より良いユーザーエクスペリエンスを提供します。 Googleの最近のGmailインターフェースの変更によく似ています。あなたも同様にカスタムスクロールバーの使用を検討する必要があります:)