Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Breite eines fest positionierten Div so einstellen, dass es mit dem übergeordneten Container übereinstimmt?

Wie kann ich die Breite eines fest positionierten Div so einstellen, dass es mit dem übergeordneten Container übereinstimmt?

Mary-Kate Olsen
Freigeben: 2024-11-19 12:45:03
Original
376 Leute haben es durchsucht

How Can I Set the Width of a Fixed Positioned Div to Match its Parent Container?

Problem beim Festlegen der Breite des positionierten festen Div

Bei dem Versuch, einem „Position: Fest“-Div eine Breite von 100 % zuzuweisen , entsteht ein Dilemma, wenn das Element weiterhin die Breite des Browserfensters oder Dokuments annimmt. Obwohl ein übergeordnetes Div mit einer bestimmten Breite definiert wird, hält sich das feste Div nicht daran.

Um dieses Problem zu beheben, wenden Sie das Stilattribut „width:inherit“ auf alle im übergeordneten Div verschachtelten Divs an. Diese Lösung wird im folgenden HTML- und CSS-Code demonstriert:

<div>
Nach dem Login kopieren
#container {
    width: 800px;
}

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

#fixed * {
    width: inherit;
}
Nach dem Login kopieren

Durch die Angabe von „width:inherit“ für die untergeordneten Elemente des festen Div erben diese die Breite ihres übergeordneten Elements und stellen so die Ausrichtung sicher mit den vorgesehenen Maßen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite eines fest positionierten Div so einstellen, dass es mit dem übergeordneten Container übereinstimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage