html - フロートハックではスクロールバーは表示されません。

Question

<div>この例のように設定されたいくつかのWebサイトがありますhttp://jsfiddle.net/kLQ5z/1/

問題は、訪問者の画面が小さい場合、画面outerContent外に表示されることです。
通常はスクロールバーが表示されますが<div>、このようにハックのように設定しているため、スクロールバーは表示されず、マウスの水平スクロールも使用できません。

何か助けはありますか？

Answer 1

私はあなたのjsFiddleで遊んだ、そしてここにうまくいくように見える何かがある。基本的に、私が使用したのは反復プロセスでした。

1. フローティングボックスが画面から消えたときにスクロールバーを表示するには、コンテンツ領域内にある必要があります。

2. これを行う1つの方法は、メインボックスに固定の左マージンを与えることですが、中央に保持するには、それを。で外側のdivにラップする必要がありmargin: autoます。

3. 正確に中央に配置するには、それに一致する右マージンを与える必要もあります。

4. ただし、理想的には、画面が狭すぎて完全に表示できない場合は、スクロールバーが表示される前にその余白を絞り出してください。CSSではどのように機能しますか？テーブルセル！したがって、固定マージンの代わりに、。で空のダミーdivを使用しdisplay: table-cellます。

それはまだハックであり、それを改善できなかったら私は驚きます。あまりよくテストしていませんが、少なくともChromeでは動作するようです。