ホームページ > ウェブフロントエンド > CSSチュートリアル > 中央揃えの DIV がスクロールバーによって移動されないようにするにはどうすればよいですか?

中央揃えの DIV がスクロールバーによって移動されないようにするにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-10 15:32:11
オリジナル
848 人が閲覧しました

How Can I Prevent Scrollbars from Shifting My Center-Aligned DIV?

スクロールバーによる Web ページの位置変更の防止

Web サイト内に中央揃えの DIV を組み込む場合、特定のページにスクロールバーが存在すると、視覚的な違和感を生み出します。ユーザーがスクロールの必要がある場合とない場合にページ間を移動すると、スクロールバーの表示により配置が乱れ、ページがわずかに横に移動します。この問題は、すべてのページにスクロールバーを明示的に表示しなくても解決できます。

解決策:

スクロールバーがページの位置を変更しないようにするには、overflow-y プロパティを適用する必要があります。 へタグ。この方法により、コンテンツがビューポートの高さを超えた場合にのみスクロールバーがアクティブになります。

html {
  overflow-y: scroll;
}
ログイン後にコピー

このスタイルを に適用します。 をターゲットとするため、この要素は非常に重要です。要素を使用すると、Internet Explorer 7 に二重のスクロールバーが表示されることがあります。HTML ドキュメントを垂直にスクロールする必要があることを明示的に示すことで、スクロールバーはコンテンツから独立し、ページの配置が維持され、予期しないシフトが回避されます。

以上が中央揃えの DIV がスクロールバーによって移動されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート