2016-03-27 2 views
3

J'ai un problème un peu compliqué. J'ai besoin de mettre line-height par différence de vh unité et px par calc en CSS. Mon idée est de le définir par ce codeligne-hauteur calc vh unité

line-height: calc(100vh - 100px); 

Cela semble facile mais ne fonctionne pas. Pourquoi calculer avec ces unités ne fonctionne pas est décrit dans CSS Calc Viewport Units Workaround? où est-ce résolu pour la propriété height en hacking margin et padding mais il ne peut pas être utilisé pour la propriété line-height.

Je vois que ce problème est résolu dans Chrome, IE et Edge mais je dois le faire aussi sur Firefox. Dans Firefox, il s'affiche dans les outils de développement

Valeur de propriété non valide.

Une idée? (JavaScript n'est pas la solution pour moi)

+0

Pouvez-vous s'il vous plaît faire un [mcve] de la façon dont il fonctionne dans Chrome, IE, et Edge s'il vous plaît? – zer00ne

Répondre

0

Il travaille ici (dans Firefox):

http://codepen.io/anon/pen/QGqMvK

Il n'y a pas d'avertissement au sujet d'une valeur de propriété non valide, et je peux changer à la fois la valeur vh et px à l'intérieur du calc, voir le résultat changer en conséquence.

Au moins, c'est dans Firefox sous Mac OS 50.0 10.12.1