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

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);
}

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;
}

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!