CSS: Réglage de la hauteur/largeur en Pourcentage, moins de pixels
Je suis en train de créer un peu de ré-utilisable classes CSS pour plus de cohérence et moins d'encombrement sur mon site, et je suis coincé à essayer de normaliser une chose que j'utilise fréquemment.
J'ai un conteneur <div>
que je ne veux pas définir la hauteur de (parce qu'il va varier selon l'endroit sur le site où il est), et à l'intérieur il est un en-tête <div>
, puis un liste non ordonnée de produits, tous avec CSS appliquée à eux.
Qu'il ressemble beaucoup à cela:
Je veux le liste non ordonnée de prendre le reste de la salle dans le conteneur <div>
, sachant que l'en-tête <div>
est 18px
de haut. Je ne sais pas comment spécifier la liste de hauteur comme "le résultat de 100%
moins 18px
".
J'ai vu cette question posée dans un couple d'autres contextes, mais j'ai pensé qu'il serait utile de se poser à nouveau pour mon cas particulier. Quelqu'un aurait-il des conseils dans cette situation?
- Définir une marge? __
- Je suppose que vous êtes suggérant j'ai mis un margin-top sur ma liste non-ordonnée de, disons, 17px. Mais cela pousse l'ensemble de la liste vers le bas; elle n'est pas la cause de rétrécir pour rester dans le conteneur. Essentiellement, c'est de la hauteur actuelle est maintenue, mais c'est juste poussé vers le bas par 17px. Cela ne résout pas mon problème, mais je pense que c'est un pas dans la bonne direction parce que j'ai vu d'autres approches en ligne, qui ont utilisé cette technique.
- Je viens de résoudre ce problème dans ma question que j'ai posté ici. stackoverflow.com/a/10420387/340947
- double possible de CSS Comment définir div hauteur de 100% à moins nPx
Vous devez vous connecter pour publier un commentaire.
Je me rends compte que c'est un vieux post, mais étant donné qu'il n'a pas été suggéré qu'il vaut la peine de mentionner que si vous écrivez pour CSS3 compatible navigateurs, vous pouvez utiliser
calc
:Il vaut la peine de noter que pas tous les navigateurs actuellement en charge la norme CSS3 calc() de la fonction, afin de mettre en œuvre le navigateur des versions spécifiques de la fonction peut être requis comme suit:
lessc --strict-math=on
dans l'ordre de moins en moins de ne pas évaluer l'expression à l'intérieur de lacalc
- juste un problème, j'ai fait face et a passé beaucoup de temps (que les Moins de 2.0.0)calc
?100%-18px
,100%- 18px
, et100% -18px
ne fonctionne pas dans les navigateurs que j'ai testé avec.~'calc(50% - 20px)';
Pour un peu d'une approche différente, vous pouvez utiliser quelque chose comme ceci sur la liste:
Cela fonctionne tant que le conteneur parent a
position: relative;
position: relative;
été le déclenchement me.absolute
dans le conteneur enfant, il ne peut pas êtrerelative
.absolute
trop), et il doit être réglé à 100% à sa hauteur.J'utilise Jquery pour cette
puis-je lier la fenêtre de redimensionnement alors recalculer à chaque fois que la fenêtre du navigateur est redimensionnée (si le conteneur de la taille changé avec fenêtre de redimensionnement)
Ne pas définir la hauteur en pourcentage, il suffit de régler le
top=0
etbottom=0
, comme ceci:height:100%
etdisplay:block
. Sinon, ce serait un très élégante solution. Il est intéressant de noter,margin:auto
échoue également au centre d'une largeur fixe de l'objet à la verticale, même si elle fonctionne bien à l'horizontale.En supposant 17px en-tête hauteur
Liste css:
Header css:
ul { margin-top: -17px; }
overflow:hidden;
sur l'élément contenantoverflow:auto;
sur l'élément souhaité.Il a travaillé pour moi!
calc()
au centre lors de l'exécution. Mais pour de nombreux cas, cela ne devrait pas être un problème. Une autre chose à garder à l'esprit est que l'utilisation de beaucoup de valeurs négatives pour les marges, le remplissage et les décalages peuvent causer de la confusion lors du débogage de code plus tard, alors essayez de garder les choses simples.Essayer box-sizing. Pour la liste:
Pour l'en-tête:
Bien sûr, le conteneur parent doit a quelque chose comme:
J'ai essayé quelques autres réponses, et aucun d'entre eux travaillaient tout à fait comment je les voulais. Notre situation était très similaire, où nous avons eu une tête de la fenêtre et la fenêtre est redimensionnable avec des images dans la fenêtre d'administration. Nous avons voulu verrouiller le ratio d'aspect de l'redimensionnement sans avoir besoin d'ajouter dans les calculs pour tenir compte de la taille fixe de la tête et ont encore l'image de remplir la fenêtre du corps.
Ci-dessous, j'ai créé un très simple morceau de code qui montre ce qu'on a fait qui semble bien fonctionner dans notre situation, qui doit être compatible sur la plupart des navigateurs.
Sur notre élément de fenêtre, nous avons ajouté une marge de 20px qui contribue au positionnement par rapport à d'autres éléments sur l'écran, mais ne contribue pas à la "taille" de la fenêtre. La fenêtre en-tête est ensuite positionné en absolu (qui supprime le flux des autres éléments, afin de ne pas provoquer d'autres éléments comme la liste non ordonnée d'être décalé) et son sommet est placé -20px qui met la tête à l'intérieur de la marge de la fenêtre. Enfin, notre ul élément est ajouté à la fenêtre, et la hauteur peut être réglée à 100%, ce qui va l'amener à remplir la fenêtre du corps (à l'exclusion de la marge).
CSS:
HTML:
Merci, j'ai résolu le mien avec votre aide, peaufinant un peu, car je veux un div de largeur 100% 100% hauteur (moins de hauteur de la barre du bas) et pas de scroll sur le corps (sans hack /masquer les barres de défilement).
Pour CSS:
Pour HTML:
Qui a fait le tour, ah oui j'ai mis un peu de valeur greatter sur les div.ajusté pour le fond que pour la barre du bas de la hauteur, sinon la barre de défilement verticale s'affiche, j'ai ajusté à la valeur la plus proche.
Que la différence est parce que l'un des éléments sur la dynamique de la zone est l'ajout d'un supplément fond du trou que je ne sais pas comment faire pour se débarrasser de... c'est une balise vidéo (HTML5), veuillez noter que j'ai mis ce vidéo tag avec ce css (il n'y a aucune raison pour elle de faire un trou en bas, mais il n'):
Le but: Avoir une vidéo qui prend 100% de la brower (et redimensionne de manière dynamique lorsque le navigateur est redimensionnée, mais sans en changer l'aspect ratio) moins d'un fond de l'espace que j'utilise un div avec quelques textes, les boutons, etc (et les validateurs du w3c & css bien sûr).
EDIT: j'ai trouvé la raison, de la vidéo balise de texte, pas un élément de bloc, donc je l'ai réparé avec ce css:
Note le
display:block;
sur la balise vidéo.Une autre façon d'atteindre le même objectif: flex boîtes.
Le récipient une colonne flex zone, puis vous avez toute liberté pour permettre à certains éléments ont une taille fixe (comportement par défaut) ou de remplissage/rétrécir en bas de l'espace de conteneur (avec flex-grow:1-flex réduire:1).
Voir https://jsfiddle.net/2Lmodwxk/
(essayez d'étendre ou de réduire la fenêtre à l'avis de l'effet)
Remarque: vous pouvez également utiliser le raccourci de la propriété:
Je ne suis pas sûr si ce travail dans votre situation particulière, mais j'ai trouvé que le rembourrage à l'intérieur de la div de pousser du contenu autour à l'intérieur d'une div si le div contenant est une taille fixe. Que vous auriez à flotteur ou tout à fait la position de votre élément d'en-tête, mais sinon, je n'ai pas essayé ce qui concerne la variable de la taille de divs.