position: fixed und width: erben mit prozentualen Eltern
Ich versuche, einem festen -Element eine width eines übergeordneten Prozentsatzes (hier #container ) zu geben. Wenn ich Pixel anstelle des Prozentsatzes verwende, funktioniert es. Wie kann ich es tun? Ist dies mit CSS möglich?
HTML
%Vor%CSS
%Vor%Hinzufügen:
Ich brauche position:fixed . Weil ich es am Ende der Seite so platzieren möchte:
Lösung mit position:relativ funktioniert nicht für mich.
4 Antworten
Es scheint so, als ob der statische Wert (250px) durch normale Vererbung weitergegeben werden kann. Wohingegen, wenn der relative Wert (90%) verwendet wird, das feste div bereits aus dem Fluss genommen wurde, und jetzt vererbungstechnisch ist es das Darstellungsfenster. Es scheint mir, dass Sie gute alte js verwenden müssen.
Aber diese Frage ist jetzt schon Monate alt, also ist es wahrscheinlich auch egal.
Es besteht die Überzeugung, dass vererbte Werte von relativen Werten (wie Prozentsätzen) in absolute Werte "übersetzt" werden. Erraten Sie, was? Es ist falsch. Hier ist, was MDN dazu sagt:
Der
inheritCSS-Wert verursacht das Element, für das er angegeben wurde nimm den berechneten Wert der Eigenschaft von seinem Elternelement.[...]
Die erforderliche Berechnung, um den berechneten Wert für die Eigenschaft zu erreichen umfasst in der Regel die Konvertierung von relativen Werten (z. B. in
em unitsoderpercentages) in absolute Werte . Wenn ein Element beispielsweise die Wertefont-size: 16pxundpadding-top: 2emangegeben hat, lautet der berechnete Wert von padding-top32px(doppelte Schriftgröße).Jedoch für einige Eigenschaften (diejenigen, in denen Prozentsätze relativ sind etwas, das Layout erfordern kann, um festzustellen, wie
width,margin-right,text-indentundtop), prozentuale angegebene Werte werden gedreht in Prozent berechnete Werte. [...] Diese relativen Werte, die im berechneten Wert verbleiben, werden absolut, wenn der verwendete Wert bestimmt wird.
Jetzt ein Beispiel. Nehmen wir an, wir haben folgende Struktur:
%Vor%... und das folgende CSS:
%Vor%... Sie werden dieses Bild sehen:
... was bedeutet, dass, während #charlie element die gleiche Höhe hat wie sein #bravo parent, seine Breite 50% seines Elternteils ist. Vererbt wurde ein berechneter Wert: 100px für die Höhe, 50% für die Breite.
Obwohl diese Funktion je nach Situation für nicht fixierte Elemente gut oder schlecht sein kann, scheint sie definitiv die fixen zu verletzen. Da der 50% -Wert für width -Eigenschaft unverändert übernommen wird, basiert der used value -Wert für diese Dimension auf dem Ansichtsfenster. Dasselbe gilt für percentage-using -Werte, z. B. calc(50%) .
Sie haben #outer als width: 300px, #container als 90% bedeutet 270px, jetzt haben Sie width angegeben: inherit und position: fixed das ist mehrdeutig im Browser, verwenden Sie also position: fixed mit width: x% für #fixed
setze die Breite von "fixed" auf 100% und gib ihm (sagen wir mal) eine Position: relative statt fixed. Ссылка
%Vor%Tags und Links html css css-position