ホームページ > ウェブフロントエンド > CSSチュートリアル > 固定 Div を親の幅に対応させるにはどうすればよいですか?

固定 Div を親の幅に対応させるにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-20 22:16:16
オリジナル
870 人が閲覧しました

How to Make Fixed Divs Responsive to Their Parent Width?

親要素を基準にして固定 Div を配置する

position:fixed で div の幅を設定しようとすると、次のような場合に問題が発生する可能性があります。彼らは、幅がその親 div に相対的なものであることを望んでいます。ただし、デフォルトでは、固定要素はドキュメントまたはウィンドウから幅を継承します。

解決方法

この問題を解決するには、次の CSS 属性を親 div に適用します。 :

width:inherit;
ログイン後にコピー

これは、親 div 内の内部 div に親 div の幅を継承するように指示します。その結果、固定 div の幅は親 div を基準にして、目的のレイアウトを提供します。

<div>
ログイン後にコピー
#container {
  width: inherit;
}

#fixed {
  position: fixed;
  width: 100%;
}
ログイン後にコピー

注:

特定のブラウザで幅の継承サポートが必要な場合は、JavaScript ベースの実装を検討してください。 解決。ただし、最新のブラウザのほとんどでは、親 div に「width:継承」を適用すると、この問題が効果的に解決されます。

以上が固定 Div を親の幅に対応させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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