Ich habe ein Seitenleisten-DIV, das ich vertikal expandieren möchte, um es mit seinem enthaltenden div zu vergleichen.
Ich habe das getan, um das zu erreichen
%Vor%Aber der Wrapper, der Inhalt und die Seitenleiste erweitern sich nie um etwa 1000px, selbst wenn der Inhalt mehrere Male ist.
Ich glaube, das liegt daran, dass der Inhalt von #wrapper , #content vollständig flotierte DIVs sind.
Ich habe versucht, leere DIVs mit clear:both als letztes Element in #wrapper und #content zu setzen, aber ohne Erfolg.
Hinweis: Fußzeile ist feste Position
Das Problem besteht darin, dass Sie 100% auf html, body und #wrapper setzen. Das bedeutet, dass die Höhe der Eltern die Höhe der Eltern ist, # der Elternteil des Elternteils body, body html, was ist htmls Elternteil? Ich bin nicht sicher, ich vermute das Browserfenster (oder seine Ansicht Port), wenn ja, dann # Wrapper Höhe wird immer gleich der Höhe des Browserfensters, wenn also die Höhe Ihres Browserfensters ist 1000px, dann
Die Höhe von #wrapper wird immer 1000px betragen, und da Sie 100% auf # sidebar und #content setzen, wird ihre Höhe auch trotz der Höhe der inneren Elemente immer 1000px betragen
wenn ich recht hatte, solltest du die html-höhe separat einstellen, die höhe von anderen auf 100% und die min-höhe von html auf 100% setzen und die höhe belassen. In der Theorie wird dies HTML mindestens so hoch wie das Browserfenster zwingen, aber erweitern, wenn innere Elemente höher als der Browser sind, obwohl ich es nicht getestet habe
lass mich wissen, ob ich Recht hatte oder nicht.
Bearbeiten :
Ich habe es getestet, es funktioniert.
tu das einfach:
Stellen Sie die Höhe nicht ein, und stellen Sie sicher, dass die Schwebepläne und keine absolute Positionierung auf inneren Elementen gelöscht wird, wenn die Höhe der inneren Elemente berücksichtigt werden soll. Jetzt wird der Body den gesamten View-Port des Browserfensters einnehmen, wenn nicht genügend Elemente vorhanden sind, um ihn zu verschieben. Wenn dies der Fall ist, wird der Body bis zum Ende der Seite erweitert, nicht nur das Browserfenster.
hat es in Chrom getestet und sollte auch in Firefox funktionieren
weiß nicht über ie.
nein, actaully, bei einem zweiten test, es hat nicht funktioniert
Es scheint nur, wenn das Elternteil eine gegebene Höhe hat (zB Höhe: 500px oder Höhe: 100%), die Höhe: 100% wird funktionieren; Wenn das übergeordnete Element min-height aufweist: 100% und keine Höhe, kann das innere Element keine Höhe verwenden: 100% entspricht dem übergeordneten Element.
Ich sehe keine Notwendigkeit, die Höhe dieser Elemente auf 100% zu setzen. Sie sagen: "Ich habe eine Sidebar DIV, die ich vertikal erweitern möchte, um ihr div zu entsprechen." Meinst du, du möchtest, dass die Höhe der Seitenleiste der Höhe des #content DIV entspricht? Betrachten Sie in diesem Fall die "Faux Columns" -Methode, die hier beschrieben wird. Ein anderer Weg wäre, die Höhe des #content divs mit Javascript zu berechnen und diese Höhe auf #sidesbar anzuwenden.
Um Floats richtig zu löschen, sollte das Räumelement NACH dem Floating-Element platziert werden, nicht innerhalb des Floating-Elements. Ein nützlicher Trick, den ich oft selbst benutze, ist der Pseudo-Selektor: AFTER. Angenommen, Sie müssen #content löschen. Dann:
%Vor%Dies wird ein unsichtbares Element nach Ihrem Element platzieren, und es wird Ihr Element löschen.