Wie kann ich dieses komplizierte Layout nur mit CSS erstellen?
ÜBERSICHT
Ich habe einige Tutorials zum Thema "Vertikales Zentrieren mit CSS" gelesen:
... aber es gibt eine andere Komponente in meinem Layout, die in keiner dieser Methoden neben der vertikalen Zentrierung dargestellt wird.
.
Dieses Layout besteht aus zwei Komponenten. Zuerst vertikal & amp; horizontalen Zentrieren des Inhalts zwischen der Kopf- und Fußzeile (das ist eine Sticky-Fußzeile ). Ich habe den Code in einer Geige, um zu demonstrieren, aber ich war nicht in der Lage, dies in IE zu arbeiten (der Code ist am Ende des Beitrags).
Die zweite Komponente ist, wo der grüne Pfeil zeigt. Dies stellt ein verstecktes Element dar, das beim Klicken auf einen Teil des Textes vertikal nach unten erweitert werden soll. Ich möchte diese Erweiterung jedoch nicht, um den Inhalt nach oben zu verschieben, als ob alles zentriert wäre ... Ich möchte, dass dieses Element nach unten erweitert wird, ohne die Position des Inhalts zu beeinflussen UND Schieben Sie den Sticky Footer nach unten, wenn er sich ausdehnt. In den meisten Fällen wird eine Browser-Bildlaufleiste angezeigt.
Die Wirkung des ausgeblendeten Elements sollte daher wie ein Banner sein, das von einer Kante fällt.
So sollte das Layout aussehen nachdem das verborgene Element erweitert wurde:
FRAGE
Wie würde ich dieses Layout mit only CSS erreichen und es wäre browserübergreifend kompatibel? Bitte lassen Sie mich wissen, wenn ich weiter erklären muss, um Verwirrung zu klären.
CODE SO FAR
Hinweis ... Ich habe einen Teil des Standardcodes ausgelassen, der mit HTML5 BoilerPlate geliefert wird.
CSS
%Vor%HTML
%Vor%1 Antwort
Wenn ich Sie richtig verstehe (ich entschuldige mich, wenn ich hier die falsche Frage beantworte), möchten Sie, dass ein Element unbekannter Höhe horizontal und vertikal zentriert ist, mit einem möglichen anderen Element darunter, das die Position nicht beeinflussen sollte wenn es angezeigt wird?
Wie wäre es mit Überlauf? Hier ist eine Demo. Ich werde den Code bald hier einfügen.
Kompatibilitätswarnung: Die verwendete vertikale Zentrierungsmethode funktioniert nicht in Internet Explorer 7 oder niedriger.
Tags und Links html css layout vertical-alignment