6

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

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

コード：

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


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

右に切り替えた場合: 20px; 左: 20px; それは機能していますが、それ以外ではありません。javascriptなしでそれを修正する方法はありますか?

4

2 に答える 2

1

問題は、に続くコンテンツがないことです#wrapper。水平スクロールを取得するには、ビューポートが狭くなると非表示になるドキュメントの左端にコンテンツが固定されている必要があります。そうしないと、コンテンツがビューポートの幅を超えます。は右に浮いているので#wrapper、左側にアンカーポイントがないので無理です。:afterしかし、それは機能します。

#wrapper { float:right ... }

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

上記のCSSは、のコンテンツの後にスペースを追加します。bodyこれは。です#wrapper。そのスペースは、少なくとも#wrapperボックスモデルの幅ですが、フロートがなく、ビューポートの左端に固定されています。つまり...右端が非表示になるとすぐに、水平スクロールがトリガーされます。#wrapperしたがって、スクロールイベントを引き起こしているような錯覚を与えます。

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

于 2012-11-30T15:21:51.070 に答える
1

float right を使用することは私にとってより論理的ですが、含まれる要素の幅または最小幅を設定できる絶対位置が必要です。

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
}
于 2012-11-29T19:50:03.003 に答える