Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erreicht man dynamische Breitenanpassungen ohne CSS Calc() für eine breitere Browserkompatibilität?

Patricia Arquette
Freigeben: 2024-11-12 20:31:02
Original
168 Leute haben es durchsucht

How to Achieve Dynamic Width Adjustments Without CSS Calc() for Wider Browser Compatibility?

Alternative zu CSS Calc

Die CSS-Funktion calc() ermöglicht bequem dynamische Breitenanpassungen von Elementen. Obwohl es von modernen Browsern unterstützt wird, fehlt die Kompatibilität mit älteren Versionen wie IE 5.5 und niedriger.

Um dieses Problem zu beheben und die Unterstützung auf Opera und den Android-Browser auszuweiten, sollten Sie stattdessen die Verwendung von box-sizing: border-box in Betracht ziehen.

Nehmen Sie beispielsweise ein Div mit der Klasse „sideBar“ mit einer angenommenen Breite von 300 Pixeln an. Um die Breite des „Inhalt“-Divs basierend auf der Seitenleistenbreite dynamisch anzupassen, vermeiden Sie Folgendes:

.content {
  width: calc(100% - 300px);
}
Nach dem Login kopieren

Wenden Sie stattdessen die folgenden Stile an:

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Nach dem Login kopieren

Durch die Definition einer festen Breite Für die Seitenleiste und die Anwendung von box-sizing: border-box auf das Inhalts-Div passt sich die Breite des Inhalts automatisch an die Breite der Seitenleiste an, sodass calc() nicht mehr erforderlich ist. Dieser Ansatz gewährleistet die Kompatibilität mit einer größeren Auswahl an Browsern, einschließlich älterer Versionen von IE, Opera und dem Android-Browser.

Das obige ist der detaillierte Inhalt vonWie erreicht man dynamische Breitenanpassungen ohne CSS Calc() für eine breitere Browserkompatibilität?. 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