web-dev-qa-db-fra.com

CSS: largeur en pourcentage et bordures

J'ai défini les largeurs des conteneurs en pourcentage. Je voudrais ajouter une bordure (3 pixels sur le côté droit d'une largeur), puisque la largeur du conteneur est en% tandis que la largeur de la bordure est en px, comment puis-je ajuster la largeur du conteneur?

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

Je voudrais ajouter une bordure 3px sur le côté droit de .left. Par exemple:

.left{
    width:30%;
    border:3px solid #000;
}

Étant donné que j'ai défini la largeur dans le%, quelle est la meilleure façon de réajuster la largeur du .left. Je peux grossièrement réduire la largeur à 29%, mais je veux le faire avec précision.

htmlcsslayout
34
user1355300

Utilisez le box-sizing: border-box propriété. Il modifie le comportement du modèle de boîte pour traiter le remplissage et la bordure comme faisant partie de la largeur totale de l'élément (pas les marges, cependant). Cela signifie que la largeur ou la hauteur définie de l'élément inclut les dimensions définies pour le rembourrage et la bordure. Dans votre cas, cela signifierait la largeur de l'élément et sa largeur de bordure consommerait 30% de l'espace disponible.

CSS box model

La prise en charge n'est pas parfaite, mais les préfixes des fournisseurs attraperont la plupart sinon tous les navigateurs modernes:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

Plus d'informations peuvent être trouvées sur les MDN et Quirksmode .

selon Quirksmode , en utilisant les 3 préfixes des fournisseurs ci-dessus (-moz-, -webkit- et -ms-), vous bénéficiez de la prise en charge de tous les navigateurs, même IE8.

88
Bojangles

Le moyen le plus simple pour tous les navigateurs consiste à ne PAS définir la bordure sur les div externes, et à la place la définir sur une nouvelle div à l'intérieur de .left. Simple et fonctionne bien.

4
Emil Stenström

C'est un peu délicat, mais consultez ce post sur un moyen de le contourner:

Le box-sizing la propriété peut également vous intéresser, vérifiez ceci:

2
Sarfraz

Changez simplement px en vw comme

border-width: 10px;

à

border-width: 10vw;

C'est ce que fait le pourcentage ...

1
user2906688