Wie stelle ich die Breite eines festen Elements relativ zu seinem übergeordneten Element ein?

Verstehen der Breite eines festen Elements relativ zum übergeordneten Element

Bei der Definition der Breite eines festen Divs relativ zu seinem übergeordneten Element entsteht die Herausforderung, wenn das feste Element angezeigt wird stattdessen die gesamte Fensterbreite einnehmen. Dies liegt daran, dass durch die feste Positionierung das Element aus dem normalen Fluss entfernt wird, was dazu führt, dass es unabhängig von der Breite seines übergeordneten Elements ist.

Lösung: Breite des übergeordneten Elements erben

Um dieses Problem zu lösen , liegt die Lösung darin, die Breite des übergeordneten Divs zu erben. Durch Hinzufügen von width: inherit; Für alle inneren Divs übernimmt das feste Element die Breite seines unmittelbaren übergeordneten Elements.

JavaScript-Alternative

Für ältere Browser, die die Breite nicht unterstützen: inherit;, a Es kann eine JavaScript-Umgehungslösung eingesetzt werden. Dabei wird eine Funktion verwendet, um die Breite des festen Elements explizit festzulegen, wenn die Größe der Seite geändert wird oder sich der Inhalt ändert. Dadurch wird sichergestellt, dass das feste Element die gewünschte Beziehung zu seinem übergeordneten Element beibehält.

Beispiel und Demonstration

Eine Beispielimplementierung mit width: inherit; finden Sie hier: https://jsfiddle.net/4bGqF/9/. Alternativ kann eine JavaScript-Lösung wie folgt implementiert werden:

// 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";

Das obige ist der detaillierte Inhalt vonWie stelle ich die Breite eines festen Elements relativ zu seinem übergeordneten Element ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!