幅700px、高さ500pxで作成したオーバーレイがあります。ただし、その内容はかなり長くなるため、ユーザーはオーバーレイ内で上下にスクロールできる必要があります。
スクロールバーの幅がブラウザごとに異なるという事実を考慮して、これを設定する方法についての提案を得ることができますか？
たとえば、15pxのpadding-rightをオーバーレイラッパーに追加すると、Firefoxで見栄えがします。内容はdiv内に完全に収まり、水平バーは表示されません。
ただし、別のブラウザでは、垂直スクロールバーの幅が20ピクセルである可能性があります。これにより、コンテンツが水平方向に強制的にスクロールされるか、overflow-xを無効にすると、右側で5ピクセル分が切り捨てられます。
ブラウザに関係なく、垂直スクロールバーが表示されたときに、オーバーレイラッパーの幅が調整され、水平スクロールバーがなくてもコンテンツが完全に表示されるようにするにはどうすればよいですか？
オーバーフロープロパティは、必要なもののように聞こえますoverflow:scroll;。しかし、スクロールバーの幅の違いについてのあなたの懸念が何であるかはわかりません。これが可変であるように設定するにはどうすればよいですか？
または、問題を別の見方をすると、オーバーレイラッパーを含むdivを別のdiv内に配置し、新しいdivにscrollプロパティを設定して、最初のdivがスクロールバーとは直接関係しないようにします。例：[リンク]
編集：あなたが提供した例を見て、あなたはこのようなものが欲しいですか？トリックは、上記のようにすべての周りにdivを配置しますが、代わりに幅を指定せず、子供に合うように表示display:inline-block;します（ただし、スクロールホイールは子供の外側に留まります）。
編集2：画面の中央に配置する必要がある場合は、インラインブロックを囲む別の親divと、インラインブロックが必要であることに注意してくださいtext-align:center;。（例）
max-widthおよびjqueryスクロールバープラグインjscrollpaneを使用します。
必要に応じて、ブラウザごとにスクロールバーの幅とスタイルを定義できます。