親を基準にして固定要素の幅を設定するにはどうすればよいですか?

親を基準とした固定要素の幅を理解する

親を基準とした固定 div の幅を定義する際、固定要素が代わりにウィンドウ全体の幅を占めます。これは、固定配置によって要素が通常のフローから削除され、親の幅から独立した要素になるためです。

解決策: 親の幅を継承

この問題を解決するには、解決策は親 div の幅を継承することにあります。 width を追加することで:継承;すべての内部 div に対して、固定要素はその直接の親の幅を採用します。

JavaScript 代替

幅をサポートしていない古いブラウザの場合:継承;、 JavaScript の回避策を使用できます。これには、ページのサイズが変更されるかコンテンツが変更されるたびに、関数を使用して固定要素の幅を明示的に設定することが含まれます。これにより、固定要素がその親と望ましい関係を維持することが保証されます。

例とデモ

width:inherit; を使用した実装例。ここで見つけることができます: https://jsfiddle.net/4bGqF/9/。あるいは、JavaScript ソリューションを次のように実装することもできます:

// Get the parent div's width
var parentWidth = document.getElementById("container").offsetWidth;

// Apply the width to the fixed div
document.getElementById("fixed").style.width = parentWidth + "px";

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