Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann man feste Divs auf die Breite ihres übergeordneten Elements reagieren lassen?

Patricia Arquette
Freigeben: 2024-11-20 22:16:16
Original
804 Leute haben es durchsucht

How to Make Fixed Divs Responsive to Their Parent Width?

Feste Divs relativ zu übergeordneten Elementen positionieren

Beim Versuch, die Breite eines Divs mit „position:fixed“ festzulegen, können Benutzer auf Schwierigkeiten stoßen, wenn Sie möchten, dass die Breite relativ zum übergeordneten Div ist. Standardmäßig erben feste Elemente jedoch ihre Breite vom Dokument oder Fenster.

解决方案

Um dieses Problem zu beheben, wenden Sie das folgende CSS-Attribut auf das übergeordnete Div an :

width:inherit;
Nach dem Login kopieren

Dies weist innere Divs innerhalb des übergeordneten Divs an, die Breite des übergeordneten Divs zu erben div. Infolgedessen ist die Breite des festen Divs relativ zu seinem übergeordneten Div und sorgt für das gewünschte Layout.

Beispiel

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

#fixed {
  position: fixed;
  width: 100%;
}
Nach dem Login kopieren

Hinweis :

Wenn bestimmte Browser Unterstützung für die Breitenvererbung benötigen, sollten Sie die Implementierung einer JavaScript-basierten Lösung in Betracht ziehen. Bei den meisten modernen Browsern sollte die Anwendung von „width: inherit“ auf das übergeordnete Div dieses Problem jedoch effektiv lösen.

Das obige ist der detaillierte Inhalt vonWie kann man feste Divs auf die Breite ihres übergeordneten Elements reagieren lassen?. 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