Ich finde, dass ich JS zu oft für etwas verwenden muss, was ich für etwas halten würde, das allein in CSS lösbar sein sollte.
Hier ist eine Beispielsituation von dem, was ich versuche zu tun:
%Vor% Ich möchte nicht wirklich die Höhe des äußeren div festlegen, aber ich möchte, dass die padding-top -Eigenschaft des inneren div mit der Höhe des äußeren div übereinstimmt. Gibt es etwas über CSS, das ich vermisse? Oder ist JS der übliche Ansatz?
In jQuery würde ich so etwas tun:
%Vor%Obwohl selten, was ist mit Clients, die JS deaktivieren?
Erläuterung: Bitte beachten Sie, dass es sich nicht so sehr um eine Frage "wie mache ich das in CSS?" handelt. Mir ist bewusst, dass dies derzeit in CSS nicht möglich ist. Es ist eher eine Frage darüber, welche anderen Arten von Lösungen die Koordination, die ich anstrebe, erreichen könnten. Ich kann CSS in PHP mit Vars schreiben, wenn ich nur Werte für die Erstlieferung berechnen möchte, aber das ist nicht das, wonach ich suche. Es geht vielmehr darum, zwei Elemente so zu koordinieren, dass sich bei Änderungen (aufgrund der Größenänderung des Fensters oder der Drehung eines Geräts oder der Einführung eines anderen Elements über AJAX usw.) auch das Styling eines anderen Elements ändert.
Die Antwort ist nein, es ist nicht möglich (in diesem Moment).
Durch Zufall bin ich auf die Tatsache gestoßen, dass Sie nur die padding-top -Eigenschaft relativ zur parent element's width !? In Ihrem Demo-Fall wäre das:
Ich habe einen kleinen Testfall gemacht, der folgendes zeigt: Ссылка . Ändern Sie die Größe des Ausgabefensters, um die Werte anzuzeigen. Wenn auf 50% eingestellt; Die padding-top -Eigenschaft ist genau 50% der Breite des Elternteils, weil anscheinend:
Prozentangaben für alle Padding- / Margin-Eigenschaften beziehen sich auf die Breite des Elternteils
Als Referenz: Wie ist der Füllgrad als Prozentsatz der Breite des übergeordneten Elements?
Ich glaube nicht, dass Sie Padding basierend auf der Höhe des übergeordneten Elements festlegen können. Sie könnten einen Präprozessor wie SASS und LESS verwenden, die Variablen unterstützen.
Ich bin mir nicht sicher, was Sie zu tun versuchen, aber ich denke, das würde ein ähnliches Ergebnis haben:
%Vor%Die Browser-Unterstützung ist in Ordnung mit den entsprechenden Präfixen - Ссылка
Wenn Sie den fraglichen HTML-Elementen IDs oder Klassen zuweisen, sollte es relativ einfach sein, das zu erreichen, von dem ich annehme, dass Sie es versuchen. Was ist:
%Vor%Ich stelle mir vor, dass das, was das CSS tun soll, automatisch das .inner padding-top auf die Höhe des .outers setzt, ohne das CSS ständig anpassen zu müssen. Wie jedoch jmr333 feststellte, gibt es zur Zeit keine Unterstützung für Variablen in CSS.
In einer solchen Situation sehe ich jedoch nicht, warum Sie überhaupt JavaScript implementieren müssen, wenn Sie einfach das CSS an Ihre Bedürfnisse anpassen können.
Tags und Links javascript html jquery css