ウェブページ読み込み時に左右にジャンプする原因の分析と解決
|
最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを margin:0 auto; で中央に配置すると、ウェブページは開いた瞬間に左に揺れ、別のページに入ると右に揺れ、また左に戻ります。ページ間を頻繁に移動すると、めまいがします。原因は、ウェブページの高さが足りないと、右側のスクロールバーが表示されないからです。ここで、ウェブページの幅にスクロールバーの幅を追加する必要があります。 margin:0 auto; を使用すると、ウェブページは中央に配置されますが、ウェブページの高さによってブラウザにスクロールバーが表示される場合は、当然、ウェブページの幅からスクロールバーの幅を減算する必要があり、するとウェブページが少し左に揺れます。 そうでなければ、私が上で言ったことを理解していますか? 多くの人がこの状況を経験したことがあるはずです。解決策は非常に簡単で、スタイルシート (CSS) で右スクロールバーを常に表示するようにするだけです。Web ページの高さが十分でない場合、ブラウザは右スクロールバーが表示されたときにもそれを表示します。コードは次のとおりです。 コードをコピー コードは次のとおりです。html{オーバーフロー-y:スクロール;} |
<<: テキストエリアの disabled 属性と readonly 属性の具体的な使用法
>>: この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。
推薦する
Node.jsとDenoの比較
目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...
MySQL テーブルスペースのリカバリに対する正しいアプローチについての簡単な説明
目次予備的注釈問題の再現データ削除の原則データの再利用どの操作がデータホールの原因になりますか?表領...
CentOS7.5にHarbor1.7をインストールして設定するプロセス全体
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
デスクトップ仮想化を実現するために Hyper-V を展開する手順 (グラフィック チュートリアル)
Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...
追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード
1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...
CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
HTML スクロールバーのテキストエリア属性の設定
1.オーバーフローコンテンツのオーバーフロー設定（設定されたオブジェクトにスクロールバーを表示するか...
mysql5.7.17 zip の解凍とインストールの詳細な手順
1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...
JavaScriptはランダムコードの生成と検証を実現する
JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...
CSSは左固定と右適応のレイアウト方法を実現します
1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...
MySql でメモリ使用量を削減する方法の詳細な説明
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
MySQLのCOUNT(*)のパフォーマンスについてお話しましょう
序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...
MySQL データベースのステートメント ワイルドカード ファジー クエリの概要
MySQL エラー: パラメータ インデックスが範囲外です (1 > パラメータ数、つまり 0...
ボタンをクリックして画像を切り替える JavaScript
この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...
Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法
SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...