Dépannage CSS rembourrage en responsive design

Cette simple HTML5 mise en page est destinée à avoir une barre de navigation sur la gauche avec le corps du texte flottait à côté d'elle (à l'aide de pourcentages plutôt que des pixels pour un fluide, responsive design - les calculs sont dans les commentaires au sein de la CSS.)

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

Les largeurs des éléments à l'intérieur de la 'page' div ajouter jusqu'à 100% exactement. Je veux ajouter un rembourrage pour certains éléments, dans ce cas, la valeur liquidative. Si je supprime tout le rembourrage, ils flottent correctement, mais plus de 1 ou 2 pixels de remplissage (peu importe quelles unités il est spécifié dans l') et il se casse. Je ne comprends pas pourquoi c'est de casser la mise en page comme c'est le rembourrage donc, assurément, ne devrait pas modifier la taille globale de la bloquer?

Qu'ai-je manqué?

Mise à jour de la solution:
http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(Élément d'affichage largeur = largeur plus frontière plus rembourrage. La Navigation doit être nominale de 200 pixels au total avec 20px rembourrage sur la droite, donc, pour la conception de fluide, largeur = 180/900*100 ou 20%, rembourrage = 20/900*100 ou 2.222% et le corps du texte reste 700/900*100 ou 77.777%.)

OriginalL'auteur William Turrell | 2011-06-15

  1. 6

    Dans le modèle de boîte CSS, le padding est ajouté à la width pour obtenir la taille totale de la boîte. Dans votre cas, si la largeur des pourcentages d'ajouter jusqu'à 100%, même 1px signifierait que le contenu déborde.

    Essayer de régler le rembourrage en pourcentages et en tenir compte lors de l'ajout ou de laisser une zone tampon de 1 ou 2 pour cent sur les bords et ajouter les petits remplissages en pixels.

    Merci (aussi à @sandeep et @thirtydot) - pour une raison quelconque, j'avais commencé à penser l'inverse et prendre de plus en plus le rembourrage signifiait une réduction du contenu en largeur.. j'ai édité la question d'inclure une version fixe + de nouveaux calculs.

    OriginalL'auteur Alex Ciminian

  2. 7

    Tout d'abord, vous devez ajouter un doctype pour déclencher le Mode standard. Sans cela, votre page En Mode Quirks, ce qui va provoquer diabolique problèmes en particulier Internet Explorer.

    Ajouter en tant que votre première ligne:

    <!DOCTYPE html>

    Prochain, @Alex Ciminian la réponse est correcte concernant le modèle de boîte (padding n'est pas considéré comme faisant partie de width). Vous pouvez soit réduire le width par exactement la quantité de padding, ou:

    Utilisation box-sizing: border-box: https://developer.mozilla.org/en/CSS/box-sizing

    Vous serait-il ajouter aux éléments où vous souhaitez que le padding à être inclus dans le calcul de la width:

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

    Pour plus de détails à ce sujet, voir: http://css-tricks.com/box-sizing/

    La prise en charge du navigateur de cette propriété est la bonne: http://caniuse.com/css3-boxsizing - partout, mais IE6/7.

    Cool, tu ne connaissais pas box-sizing :).

    OriginalL'auteur thirtydot

  3. 3

    @williant; Alex est juste padding & border ajouter width à un élément. Donc, ajuster width selon la padding.

    css:

    #page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}

    OriginalL'auteur sandeep

  4. 1

    Vous pourrait essayer en utilisant box-sizing: border-box; ou un ensemble max-width:100% et/ou max-height:100%;.

    Le max-width et max-height css option est compatible avec les anciennes versions d'IE, si vous voulez essayer et de garder la compatibilité.

    EDIT:

    Utiliser le code ci-dessous pour utiliser box-sizing entre les navigateurs:

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

    OriginalL'auteur Daniel West