thisをご覧ください。下部の水平スクロールバーを削除するにはどうすればよいですか?
オーバーフローのプロパティを調整して画像の幅を変更しようとしましたが、スクロールバーは画面の下部に残ります。
これを引き起こしていることは誰でも知っていますか?
thisをご覧ください。下部の水平スクロールバーを削除するにはどうすればよいですか?
オーバーフローのプロパティを調整して画像の幅を変更しようとしましたが、スクロールバーは画面の下部に残ります。
これを引き起こしていることは誰でも知っていますか?
問題は.slideshow
の定義(style.css:199 ...)にあります。
ブラウザは式解決しようとする:
left
+ margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
+ right
= parent width
およびleft
が50%であり、width
が100%であるので、失敗します。 margin:-800px
の使用は、(1920 * 1.5 - 800)が2080で、そのサイズのデバイスでは広すぎるため、ディスプレイ幅が1920ピクセルのデバイスでは役に立ちません。
width
が100%の要素を暗黙的に作成するため、次の定義を代わりに使用してください。
.slideshow{
z-index: -9999;
position: absolute;
top: 0;
left: 0;
right: 0;
}
CSS Positioned Layout Module Level 3: Section 7.1も参照してください。上記の手法を使用しても、ディスプレイの幅が1024px未満のユーザーはスクロールバーを持つことに注意してください。この問題については、body{overflow-x:hidden;}
を試してください。
あなたの古いコード(唯一の補完のためにそれを使用しないでください!):
.slideshow{
z-index: -9999;
position: absolute;
top: 0;
left: 50%;
width: 100% !important;
margin-left: -800px;
}
これは、devtoolsで試したものです。
body { overflow-x: hidden; }
overflow-x:hidden;
overflow-y:auto;
それを行う必要があります。
またはそれをサポートしていない可能性がありますブラウザをカバーするために、安全のために:
overflow:auto;
overflow-x:hidden;
うん、これは基本的には=それを解決) – imjp
氏Pallazzoが言ったようにあなたが行うことができますが、これは右側に、すべてのコンテンツを切り落とすます(つまりあなたはおそらく望んでいない)を見るためにスクロールする必要があります。ラッパーのdivなどの幅の仕様を見てください。wraper
という名前のdivは、width
が1003pxに設定されています。このような絶対的な条件でディメンションを設定するのではなく、パーセンテージを使用することをお勧めします。
**最後に誰かが根本的な原因になります** 1 ..おそらく199行目のCSSルールも表示されます。それは混乱です...左:50%; margin-left:-800px;他の何かを補うために巨大な負のマージンを使っていることが分かった場合、元の方法を最初から再検討する必要があるかもしれません。 – Sparky
@ Sparky672:古いコードが含まれており、少し説明が追加されました。私は本当に貴重なCSSコードになる可能性のある脆弱な線の間のどこかに問題があるときに、なぜそんなに多くの人々があまりにも単純なハックを使用しようとしているのかわからない... – Zeta
私はそれが常にベストだと思うすべてのCSSルールをリセットしてオーバーフローを隠すというこのブランケットのアプローチではなく、何かをしなければならないということを知っています。真剣に、それについて考えてみましょう...あなた自身のルールを適用するたびにデフォルトのCSSを本質的に「リセット」します。 3行後に 'pに' margin:0; 'を適用するのはうんざりです。あなたは' p'に自分のマージンを適用するだけです。 – Sparky