Disposition fluide CSS: la marge supérieure basée sur le pourcentage augmente lorsque la largeur du conteneur augmente
J'apprends simplement les dispositions CSS fluides et la conception réactive, et j'essaie d'utiliser toutes les valeurs de pourcentage sans valeurs px dans une disposition.
Jusqu'à présent, cela semble fonctionner, mais à un endroit, je vois quelque chose à quoi je ne m'attendais pas. J'essaie de mettre une marge entre deux divs empilés verticalement qui change en fonction de la hauteur du conteneur. Je m'attends à ce que cette marge change lorsque je redimensionne la fenêtre verticalement, mais elle augmente également si vous la redimensionnez horizontalement, ce que je ne veux pas. Qu'est-ce que je rate?
Voici un violon. Merci d'avance pour votre aide.
En CSS, les quatre marges: et padding: les pourcentages sont relatifs à largeur ... même si cela peut sembler absurde. C'est juste la façon dont la spécification CSS est, il n'y a rien que vous puissiez faire à ce sujet.
Pouvez-vous faire ce que vous voulez avec 'ex' (ou 'em') à la place? C'est ainsi que j'ai l'habitude de voir des valeurs "fluides" pour la marge/le remplissage spécifiées ... et cela peut être moins problématique que les pourcentages. (Bien que je n'ai pas l'expérience de première main pertinente, je suspect les précisions extrêmement longues sur vos valeurs de pourcentage calculées vont vous préparer à des problèmes d'incompatibilité de navigateur plus tard. Mon style est de limiter CSS pourcentages en entiers si possible, ou parfois peut-être un ou parfois même deux chiffres après la virgule.)
Si vous voulez vraiment un espace vertical vide de taille arbitraire exacte qui est un pourcentage du conteneur, la première chose qui me vient à l'esprit est un <div> vide séparé avec une spécification CSS "height: nn%". Ou peut-être que quelque chose d'autre que vous spécifiez gère déjà les tailles verticales comme vous le souhaitez (car il semblerait que les marges ne font rien du tout sur un redimensionnement vertical).
Oui, c'est inattendu et contre-intuitif, mais cela fonctionne comme prévu et je n'ai aucune idée pourquoi cela fonctionne comme ça. Voir le pourcentage en haut de la marge ne change pas lorsque la hauteur de la fenêtre diminue