絶対絶対位置 - スクロールバーが表示されない

Question

ラッパーを絶対位置にして右に置くと、ウィンドウを縮小するときに水平スクロールバーがトリガーされません。

例： http://jsfiddle.net/Ue6aN/

コード：

<div id="wrapper"></div> 


#wrapper { 
width: 400px; 
height: 400px; 
position: absolute; 
right: 20px; 
top: 0px; 
border: 1px solid red; 
} 

私は切り替えた場合、右：20ピクセル;左：20ピクセル。それは機能していますが、そうでなければ機能しません。どのようにjavascriptなしでそれを修正するための任意のアイデア？

Answer 1

問題が#wrapper次まったく内容がないことです。水平スクロールを取得するには、ドキュメントの左端にコンテンツが固定されている必要があります。このコンテンツは、ビューポートが縮小されたときに非表示になるか、コンテンツがビューポート幅を超えます。 #wrapperは右浮動小数点型なので、左辺のアンカーポイントがないため不可能です。 :afterが動作します。

#wrapper { float:right ... } 

body:after { 
    clear:right; 
    content:' '; 
    display:block; 
    height:1px; 
    min-width:420px 
} 

は、CSSは、上記#wrapperあるbodyの内容、後にスペースを追加します。そのスペースは少なくとも#wrapperのボックスモデルの幅ですが、浮動小数点はなく、ビューポートの左端に固定されています。だから...右端が隠されると、水平スクロールが開始されます。 #wrapperがスクロールイベントを引き起こしているとの錯覚を与えます。

フィドル：http://jsfiddle.net/jg3nH/

Answer 2

右浮動小数点を使用する方がより論理的ですが、絶対配置する必要があるのは、含まれている要素の幅または分の幅を設定できます。

body { 
    position: relative; 
    height: 400px; //needs to be at least 1px 
    width: 100%; 
    min-width: 422px; // the width you'd like to horizontal scrollbar to appear 
}