Webサイトに水平スクロールバーが表示されるのはなぜですか？
シロップ
私はウェブサイトを作っています、そして、水平スクロールバーは示します。もちろん、私は使用することができoverflow-x、それは私のすべての問題を解決しますが、私は問題の原因を知りたいです。スクロールバーが表示される理由を誰かに教えてもらえますか？これが私のCSSです：
body {
background-image: url("rain.jpg");
background-repeat: no-repeat;
background-size: 100% 800px;
}
#header {
width: 83%;
height: 70px;
background-color: blue;
border: cyan solid 3px;
border-radius:20px;
position: relative;
top: 20px;
margin: auto;
}
p {
font-size:30px;
font-weight: bold;
color: yellow;
position: relative;
right: -450px;
top: -8px;
}
#container {
position: relative;
width: 83%;
height: 1000px;
top: 50px;
margin: auto;
background-color: blue;
}
.img {
height: 150px;
width: 225px;
padding: 0px;
padding-top: 30px;
cursor: pointer;
opacity: 1;
}
.click {
height: 400px;
width: 600px;
position: relative;
right: -200px;
cursor: pointer;
}
li {
display: inline-block;
}
マイケルベンジャミン
<p>要素が比較的配置され、right: -450px。で右にシフトされていることに注意してください。
ではposition: relative要素の元のスペースが確保されています。したがって、要素を右に450ピクセルシフトしている間、レイアウト内の元のスペースはそのまま維持され、ドキュメントは水平方向に長くなります。それがスクロールバーの理由です。
right: -450pxルールを削除または調整して、違いを確認します。
また、単に対比のために、配置を切り替えるrelativeとabsolute、ドキュメントフローから要素が削除され、元のスペースが削除されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
モバイル ビューの Web サイトに水平スクロールバーがあるのはなぜですか?
- 2
ウェブサイトに水平スクロールバーがあるのはなぜですか？
- 3
スクロールバーがないのに、モバイルデバイスでサイトの表示が異なるのはなぜですか
- 4
水平スクロールバーが表示され、垂直スクロールバーが表示されないのはなぜですか？
- 5
UIScrollViewの水平スクロールバーが表示されないのはなぜですか？
- 6
「Webデバッグツールバーの読み込み中にエラーが発生しました」と表示されるのはなぜですか。このイベントサブスクライバーを使用する場合は？
- 7
setTimeoutがコールバックにスローされたエラーのスタックトレースに表示されるのはなぜですか
- 8
水平スクロールすると固定divが表示されるのはなぜですか？
- 9
このdivにスクロールバーが表示されるのはなぜですか？
- 10
ナビゲーションバーがWebサイトに表示されないのはなぜですか？
- 11
垂直スクロールバーが常に表示されるのはなぜですか
- 12
設定したd3ストロークスタイルがデバッガーでは空の文字列として表示されますが、画面では赤で表示されるのはなぜですか？ストロークスタイルにアクセスするにはどうすればよいですか？
- 13
あるべきではないのに、なぜ私のWebサイトにスクロールバーがあるのですか？
- 14
次の（添付のスクリーンショット）ファイルサイズが負のバイトで表示されるのはなぜですか？
- 15
実稼働サーバーにSpringがインストールされているのはなぜですか？
- 16
Chrome開発ツールコンソールに、あるWebサイトでPost 500エラーへのリンクが表示され、別のWebサイトでは表示されないのはなぜですか？
- 17
Class.forNameがこのクラスのバイトコードに表示されるのはなぜですか？
- 18
ifステートメントがWebサイトに表示されないのはなぜですか？
- 19
コンソールにエラーが表示されるのはなぜですか：アクティベータースロットは、すでにバインドしているのにバインドする必要がありますか？
- 20
小型デバイスで Web サイトが水平にスクロールする
- 21
幅が100％に設定されているのに、なぜWebサイトが横にスクロールするのですか？
- 22
NSE Webサイトを廃棄するプログラムがサーバーでブロックされるのに、ローカルで機能するのはなぜですか？
- 23
イーサネットデバイスが「/ dev」に表示されないのはなぜですか？
- 24
http：// localhost：3000 /＃！/ローカルホストリンクに「＃！/」が表示されるのはなぜですか。
- 25
「ホーム画面に追加」WebアプリインストールバナーがWebアプリに表示されないのはなぜですか
- 26
ScrollViewerスクロールバーが画面に表示されないのはなぜですか？
- 27
垂直スクロールバーがWebサイトに表示されない
- 28
ピリオドで始まるオブジェクトがrstudioのグローバル環境ペインに表示されないのはなぜですか？
- 29
垂直スクロールバーが表示されたときにWebコンテンツが左にシフトしないようにするにはどうすればよいですか？アドバイスのロールアップ2017
コメントを追加