Comment créer une division extensible à 100 % de largeur avec des marges sans débordement ?

Comment afficher un Div extensible (100 % de largeur) avec des marges

Dans ce scénario, vous disposez d'un élément div d'une largeur de 100 % qui doit être extensible tout en conservant ses marges. L'approche simple utilisant la marge semble causer des problèmes de débordement. Comment pouvez-vous remédier à cela ?

La solution réside dans l’utilisation de la fonction CSS calc(). En soustrayant la valeur de marge souhaitée de 100 %, vous pouvez ajuster dynamiquement la largeur du div en fonction de la taille de l'écran. Cela garantit que toute la largeur du conteneur parent est utilisée sans aucun problème de chevauchement ou de débordement.

Voici un extrait de code CSS mis à jour qui intègre la fonction calc() :

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

Alternativement, vous pouvez également envisager d'utiliser padding au lieu de margin et d'appliquer la propriété box-sizing: border-box. Cette approche offre des fonctionnalités similaires et est prise en charge par les principaux navigateurs :

#page {
  background: red;
  width: 100%;
  height: 300px;
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 300px;
}

En mettant en œuvre ces techniques, vous pouvez afficher efficacement un div extensible avec une largeur de 100 % tout en conservant des marges cohérentes sur différentes résolutions d'écran.

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!