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
Vous devez vous connecter pour publier un commentaire.
Dans le modèle de boîte CSS, le
padding
est ajouté à lawidth
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.
OriginalL'auteur Alex Ciminian
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:
Prochain, @Alex Ciminian la réponse est correcte concernant le modèle de boîte (
padding
n'est pas considéré comme faisant partie dewidth
). Vous pouvez soit réduire lewidth
par exactement la quantité depadding
, ou:Utilisation
box-sizing: border-box
: https://developer.mozilla.org/en/CSS/box-sizingVous serait-il ajouter aux éléments où vous souhaitez que le
padding
à être inclus dans le calcul de lawidth
: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.
OriginalL'auteur thirtydot
@williant; Alex est juste
padding & border
ajouterwidth
à un élément. Donc, ajusterwidth
selon lapadding
.css:
OriginalL'auteur sandeep
Vous pourrait essayer en utilisant
box-sizing: border-box;
ou un ensemblemax-width:100%
et/oumax-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:
OriginalL'auteur Daniel West