Bordure de pixels et pourcentage en pourcentage
Je pense déjà connaître la réponse à celui-ci, mais j'ai besoin d'un test de cohérence!
Dire que j'ai
#gridtest{
width:590px;
}
Que je puisse changer la largeur en pourcentage en utilisant le RÉSULTAT TARGET=/CONTEXTE. Dans ce cas, le contexte est un conteneur avec un max-largeur de 1000px donc je ne peux faire ceci:
#gridtestpercent{
width:59%; /*590/1000*/
}
Si je devais réduire la fenêtre en bas de la div serait toujours en proportion de la de son contenant. Mais si je voulais faire
#gridtest{
width:570px;
border:10px solid red;
}
Je peux travailler la largeur en fonction de la cible maintenant 570 mais que la fenêtre est rétréci les proportions de tous sortir de la synchronisation.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
Je ne peux pas utiliser le pourcentage de la frontière. Je ne veux pas utiliser JS pour garder le contrôle du contexte et je ne peux pas utiliser le CSS3 box-déclaration sur la frontière encore.
Si je voulais utiliser la technique décrite dans le responsive web design par Ethan Marcotte où tout se rétrécit par rapport à l'autre, serais-je hors de la chance si vous utilisez une frontière?
Cheers!
source d'informationauteur user1010892
Vous devez vous connecter pour publier un commentaire.
Malheureusement, oui, vous êtes hors de la chance. Un hacky moyen de contourner ce problème est du à un wrapper
div
que vous utilisez pour créer votre frontière. Si l'extérieurdiv
serait de 57% (dans votre exemple) avec un fond de la couleur de votre choix à la frontière. Puis, à l'intérieurdiv
aurait une largeur de 96% (jouer avec le nombre exact de trouver une frontière de ce qui est approprié pour votre conception).Vous pouvez utiliser CSS3 calc() fonction,
Mixin SASS
Vous pouvez utiliser un boîtier encastré de faire de l'ombre au lieu d'une frontière:
Juste pad à l'intérieur du conteneur pour compenser.
Edit: j'écris "pad" mais bien sûr, si vous utilisez rembourrage vais jeter hors de la boîte dimensions. Marge le contenu à l'intérieur de la place.
Accepté la réponse n'est pas correcte. En fait, vous avez 2 options:
Utiliser le
box-sizing
de la propriété, de sorte que tous les rembourrages et les frontières sont considérées comme une partie de la taille:Ou, utilisez la
outline
de la propriété au lieu de la frontière de la propriété. Vous avez toujours des problèmes avec les paddings, mais il est plus facile d'ajouter. Exemple:Explication complète: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Si vous voulez rester sémantiques vous pouvez utiliser
div { box-sizing:border-box; }
ou certains en position absolue:after
éléments. Voir le post Comment puis-je ajouter 1px frontière à un div dont la largeur correspond à un pourcentage?Ce lien donne la bonne explication sur les deux solutions à ce problème:
http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
En CSS3 vous pouvez également utiliser la nouvelle
box-sizing
bien afin d'y inclure le pixel et le rembourrage comte dans lewidth
de l'élément:Si possible, en fonction de votre conception, ce que j'aime à faire est de mettre de la frontière comme un absolu div avec une largeur de 3px ( par exemple ) et d'une hauteur supérieure à celle de son parent div. Je puis mettre overflow hidden sur le div parent.