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

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

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

解決方法

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

width:inherit;

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

例

<div>
<pre class="brush:php;toolbar:false">#container {
  width: inherit;
}

#fixed {
  position: fixed;
  width: 100%;
}

注:

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