Existe-t-il un moyen de faire en sorte que le CSS reconnaisse 100 % pour inclure les marges et les bordures ?

Question

J'ai le code html suivant :

<div class="panel">Some Text Here</div>

Avec le fichier css suivant

.panel{
    display:inline-block;
    height:100%;
    border:1px solid black;
}

Comme le panneau a une bordure, la barre de défilement verticale apparaît. Existe-t-il un moyen de faire en sorte que le CSS reconnaisse 100% pour inclure les marges et la bordure ?

Answer 1

Si vous ciblez CSS3, vous pouvez utiliser l'option box-sizing propriété

Bien sûr, seuls les navigateurs les plus récents le supportent, et même dans ce cas, ils ne le supportent pas directement (encore), vous devez donc utiliser la version spécifique du navigateur (par ex. -moz-box-sizing )

.panel{
    display:inline-block;
    height:100%;
    border:1px solid black;

    box-sizing: border-box;         // IE8, Opera
    -moz-box-sizing: border-box;    // Firefox
    -webkit-box-sizing: border-box; // Chrome
}