Ich habe ein Layout mit einer vertikalen Bildlaufleiste. Eines der untergeordneten Elemente im scrollbaren div wird absolut mit einem großen oberen Wert positioniert, wodurch eine vertikale Bildlaufleiste auf dem übergeordneten Element ausgelöst wird. Das scrollbare Eltern-Div hat auch einige Child-Div-Elemente (wir nennen sie Säulen), die horizontal nebeneinander über position: absolute und einige linke Werte positioniert sind.
Hier ist das HTML-Markup:
%Vor%
und das CSS:
%Vor%Ich möchte, dass die Pfeiler-Divs die gesamte Bildlaufhöhe des übergeordneten "Containers" erfassen. Im Moment ist ihre Höhe die Client-Höhe der Eltern (nicht Scroll-Höhe). Wenn Sie also nach unten scrollen, werden Sie feststellen, dass die Säulen nicht die gesamte verfügbare Höhe innerhalb des Überlaufs ausfüllen: scrollen.
Kann jemand Änderungen an CSS-Klassen ( .container und / oder .pillar ) vorschlagen, damit dies funktioniert?
Hier ist ein Link zu js fiddle, der das gleiche Problem zeigt: Ссылка
Danke!
Nach vielen Experimenten und Haarziehen habe ich schließlich herausgefunden, dass es keine perfekte CSS-Lösung für dieses Problem gibt. Ich würde es lieben, wenn jemand mir das Gegenteil beweisen kann.
Das Problem, so wie ich es verstehe, ist, dass es kein Weg über reine Cross-Browser-kompatible CSS gibt, damit ein Kindelement 100% vertikal streckt, um seine Eltern zu füllen scrollHeight, wenn die Elternhöhe nicht explizit definiert ist .
Mit der obigen Schlussfolgerung habe ich das Problem dadurch gelöst, dass ich ein Div-Element mit expliziter Größe unter den Scroll-Container platziert habe und eine explizite Mindesthöhe auf die Säulen gesetzt habe. Ich kann die Höhe dieses neuen Übergangsdivs über JavaScript berechnen.
Hier ist das modifizierte HTML-Markup (nur das fixedMinHeight-div ist neu)
%Vor%
und das CSS (.stretchFixed ist eine Ergänzung von früher)
%Vor%Hier ist der Link zu den Änderungen: Ссылка
Alternativ kann das gleiche Schema für jede einzelne Säule angewendet werden, wodurch keine DOM-Einführung erforderlich ist.
Ich würde gerne falsch bewiesen werden, aber für die Zeit kann ich mit dieser Problemumgehung leben.
Das div .pillar wird mit position:absolute angegeben, also nimmt es keine Höhe entsprechend dem übergeordneten Element, d. h. .container .
Entfernen Sie einfach position:absolute von css von .pillar .
Hier ist der FIDDLE .
Änderungen in CSS:
%Vor%Ich habe eine Breite von 32% angegeben, weil die aktuell verwendeten Rahmen nicht in die angegebene Breite passen. Außerdem gibt es no next , um die Werte für left jetzt explizit für jede der Säulen anzugeben. Also habe ich diese Werte gerade außer Kraft gesetzt.
BEARBEITEN : Ich habe es falsch verstanden. Jetzt ist hier der korrigierte.
Geben Sie die Höhe der Säule als 100vmax an. Diese Einheit wird es 100/100 Größe des Ansichtsfensters geben, wie ich verstanden habe. Obwohl das Protokoll noch nicht gemachte Werte für die Höhen zeigt. Aber ich denke, das ist nah genug. Auch die blaue Box kommt in die Quere.
Sieh dir die FIDDLE an.
%Vor%Hier sind die Lösungen in meinem Kopf. Ich denke, Sie müssen entweder ein Wrapper-Div im Container hinzufügen:
%Vor% Oder Sie müssen allen Säulen eine bestimmte Höhe hinzufügen.
Dies liegt daran, dass Sie height:100% für die Säule verwenden. Es entspricht also dem nächsten Element, für das eine Höhe angegeben wurde.
Darüber hinaus weiß ich nicht, ob es aufgrund Ihrer Szenarioanforderung erforderlich ist, dass Sie .stretch div hinzufügen müssen. Für diesen Fall brauchen Sie dieses Div nicht. Der folgende Code tut das Gleiche wie deines.
Tags und Links html css layout css-position position