Comment réaliser des ajustements dynamiques de largeur sans CSS Calc() pour une compatibilité plus large avec les navigateurs ?

Alternative à CSS Calc

La fonction CSS calc() permet facilement des ajustements dynamiques de la largeur des éléments. Bien que pris en charge par les navigateurs modernes, il manque de compatibilité avec les anciennes versions telles que IE 5.5 et versions antérieures.

Pour résoudre ce problème et étendre la prise en charge à Opera et au navigateur Android, envisagez plutôt d'utiliser box-sizing: border-box.

Par exemple, supposons un div avec la classe "sideBar" avec une largeur supposée de 300px. Pour ajuster dynamiquement la largeur du div "contenu" en fonction de la largeur de la barre latérale, évitez d'utiliser :

.content {
  width: calc(100% - 300px);
}

Appliquez plutôt les styles suivants :

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

En définissant une largeur fixe pour la barre latérale et en appliquant box-sizing: border-box au contenu div, la largeur du contenu s'ajuste automatiquement en fonction de la largeur de la barre latérale, éliminant ainsi le besoin de calc(). Cette approche garantit la compatibilité avec un plus large éventail de navigateurs, y compris les anciennes versions d'IE, Opera et le navigateur Android.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!