HTML CSS Box avec rembourrage et marge et 100% de largeur?

J'ai une boîte #box avec width: 100%, hauteur: 100%, padding: 5px, margin: 5px; border: 5px;

J'ai besoin d'en HTML5 mise en page afficher correctement.

Maintenant, j'ai que:

Mais j'ai besoin d'ajustement bloc dans la zone de votre corps.

Code:

<!DOCTYPE html>
    <style>
    body,html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #box {
        width: 100%;
        height: 100%;
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
    }
    </style>

    <body>
    <div id="box">
    Text will be here
    </div>
    </body>

source d'informationauteur xercool

26

Le navigateur ne excacly ce que vous êtes en lui disant de faire 🙂
Cependant, je pense que vous n'aimez pas le dépassement.

Ce qui se passe, c'est que votre #box se développe en raison de la frontière et de rembourrage. Vous pouvez faire ces propriétés en médaillon, de sorte qu'il ne développez pas votre élément. Vous pouvez faire cela avec box-sizing:
```
 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }
```
Cependant, vous ne pouvez pas faire la même chose avec le marginparce que l'élément se pousse du corps: c'est ce qu'elle suppose de faire.

Vous pouvez faire une solution de contournement en faisant la même chose que ci-dessus:
```
body
{
    padding: 20px;
    box-sizing: border-box;
}
```
Vous allez utiliser le rembourrage sur le corps au lieu de la marge sur le #box.

jsFiddle

Mise à jour

À éviter la double rembourrage de l'espace, vous ne devriez l'appliquer sur l'élément de corps (ou html, mais je préfère le corps qui est votre élément visuel à la fin).
2

Selon w3c spécifications de la Boîte Modèle

Le rendu de la largeur d'une boîte de type de l'élément est égale à la somme de sa largeur, à gauche/droite de la bordure gauche/droite et de rembourrage.

Ce qui signifie que les valeurs de padding et border-width affecte la largeur totale de l'élément. Donc, ici, vous ajoutez le 15px de la marge avec 5px de frontières avec 100% de la largeur réelle de l'élément.

L'ensemble de sorte qu'il dépasse la veuve de taille c'est pourquoi il est livré avec de défilement horizontale.
2

Vous devriez utiliser CSS box-sizing propriété:
```
#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}
```
Mais s'il vous plaît noter que vous aurez besoin d'utiliser zéro margin pour que cela fonctionne.

Il y a un bon article explicatif sur comment cela fonctionne: http://css-tricks.com/box-sizing/

Avec CSS3, vous pouvez remplacer la frontière avec l'encart border-shadow et de la marge avec bordure transparente. De cette façon, vous aurez le contrôle de l'ensemble de ces paramètres: le rembourrage, la (fausse) de la marge et de la frontière:
```
#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}
```
Voir un violon ici: http://jsfiddle.net/HXR3r/

Vous pouvez utiliser les css calc()

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }

0

violon

Votre problème est, que l'on force remarqué, en Supposant juste pour heights
```
height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;
```
Ce fait height = 100% + de la frontière (2 x 5) + matelas (2 x 15) + marge
(2 x 20) = 100% + (10+30+40) px

qui est plus que 100%...donc pas de fit block in body area..Essayez de réduire la hauteur en pourcentage pour un meilleur résultat!!

Similaires est le cas pour les largeurs!!

Vous devez ajouter Ajouter box-sizing: border-box; propriété dans votre #box Et supprimer margin: 20px;

Voici la mise à jour de CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

travail de violon

Vous devez vous connecter pour publier un commentaire.

jsFiddle