CSS " Sticky-Header/Footer und Vollständig Gestreckt Mittleren Bereich?
Mit CSS, wie kann ich einfach eine Seite mit sticky header and footer
die erscheinen immer, sobald die Seite scrolling or not
. Ich fand einige Beispiel-online, aber was ich zusätzlich möchte ist, der mittlere content-Bereich sollte eine 100% stretched area between header and footer
unabhängig von der browser Größe ist.
Ich meine, die meisten Beispiele, die ich gefunden sind, die Header-und Footer sticky richtig.., aber these are just floating
und eigentlich covering the Top and Bottom parts of the 'middle' content area
. Das ist nicht das, was ich wirklich möchte.
InformationsquelleAutor | 2013-01-27
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können absolute position für alle 3 Elemente.
DEMO: http://jsfiddle.net/RkX8B/
overflow
Kommentar, Sie würden innere element in #content. Diese Methode wird verwendet, eine Menge, wenn nicht wollen, Scrollbalken auf Fensterbody
!NO SCROLLBAR at the right, for the main body
das ist der ganze Punkt von dong es auf diese Weise. Sie können den Inhalt 30000px breit und keine scrollbarsDen Lösungen oben vorgestellten arbeiten für eine sehr einfache layout, mit no border, margin und/oder padding. Viele, viele Lösungen, die Sie finden auf dem Netz wird für diese Arbeit.
Allerdings, fast alle Lösungen fallen komplett auseinander, wenn Sie einfach hinzufügen, border, margin und/oder padding für einzelne oder für alle deine Divs.
Flex-Boxen (CSS display:flex;) unglaublich mächtig für diese, und Sie arbeiten perfekt mit einer beliebigen Kombination von border, margin und/oder padding.
Können Sie Teil Platz auf dem Bildschirm in so viele Divs, wie Sie benötigen, mit einer festen Größe, prozentuale Größe, oder "was übrig bleibt" für jede innere Div. Diese können in beliebiger Reihenfolge auftreten, so sind Sie nicht beschränkt auf nur Kopfzeilen und/oder Fußzeilen. Sie können auch verwendet werden horizontal statt vertikal, und kann weiter.
So könnte man, sagen wir, einem header mit fester Größe, ein 20% Fußzeile, und ein "was übrig bleibt" client-Bereich zwischen Ihnen, die Größen dynamisch. Innerhalb, client-Bereich, die wiederum, Sie haben könnte, sagen wir, eine prozentuale Breite Menüleiste am linken Rand des Clientbereichs, eine Feste Breite vertikale divider daneben, und eine client-Bereich, der nimmt alles, was "Links" auf die Rechte Seite.
Hier ist ein Turnschuh, um zu demonstrieren, all dies. Die relevanten CSS ist bemerkenswert einfach.
CSS-Flex-Box (display:flex;) Demonstration mit Grenzen/Margin/Padding
Zum Beispiel, hier sind zwei CSS-Klassen, das erstellen von Containern, die fließen wird, den darin enthaltenen Divs entweder horizontal oder vertikal, jeweils:
Fiedel über wirklich, zeigt es alle aus, aber.
Referenz finden Sie in diesem ausgezeichneten Artikel von Chris Coyier:
Flexbox-Tutorial
Hoffe, dies alles hilft!
Du bist wahrscheinlich auf der Suche nach den "position: fixed;" - Eigenschaft festlegen und die header-top: 0; und die Fußzeile-bottom: 0; Sie könnten auch erwägen einige Polsterung an Ihrer "content-Bereich" zu berücksichtigen, dass die Kopf-und Fußzeile Raum...
Aus der Spitze von meinem Kopf, Sie hätte so etwas wie:
Wenn Sie irgendeine Art von hintergrund auf den container und wollen zu Strecken, ein height: 100%; machen soll...
Habe ich nie ein guter Weg, um diese Art von layout, obwohl... =\
display
sollteposition