Header, Inhalt und Fußzeile innerhalb eines div mit position absolute
Ich habe ein div-element mit absoluter position. Der Wert für die position ist wichtig und kann nicht geändert werden. Wie kann ich einstellen, dass eine Kopfzeile, Inhalt und Fußzeile innerhalb dieses div?
Die Höhe des header und footer fixiert sind und der Inhalt sollten alle den Raum verlassen. Es ist auch wichtig, dass der Kopf bleibt immer oben und der footer unten.
Übergeordneten element sollte auch in der Größe veränderbar sein, mit Süd-resizable-handle und der Inhalt sollte auf die Veränderung seiner Höhe nach auf die Höhe des übergeordneten Elements.
.content {
height: ?; /* What should this be?? */
}
Ein Beispiel für die situation: http://jsfiddle.net/7gPzF/26/
- Würden Sie so freundlich sein genug, um einige Stimmen und Kommentare, um diejenigen, die Ihnen geholfen hat, damit andere, die diese Seite anzeigen, sehen können, was hilfreich war und was nicht war?
- Danke für alle Antworten! Keine der Lösungen hat mir eine direkte Korrektur. Die erste Antwort gab mir die grundlegende Struktur um dieses Problem zu lösen, Dank Obsidion. Hier ist die Finale version, die ich schließlich mit auf meiner Seite: jsfiddle.net/7gPzF/95
- D Ihr willkommen. Bedeutet das, dass meine Antwort als korrekt markiert?
- Ja, sicher. Es ist nahe genug, um das, was ich suchte. Ich bin neu hier und noch nicht vertraut mit all den Verfahren.
Du musst angemeldet sein, um einen Kommentar abzugeben.
DEMO
Einen Weg, dies zu tun ist, um Mitte Inhalt, position absolute und bewegen Sie den header und footer drin. Dann verwenden Sie die Polsterung für den offset des Kopf-und Fußraum.
HTML
CSS:
HTML:
mit jQuery können Sie berechnen die Höhe von der linken Seite Platz für .Inhalt
Hier arbeitet: http://jsfiddle.net/yX4Py/
Habe ich nicht komplett verstanden, was du meintest denke ich mal,
Aber nehmen Sie einen Blick an diesem code ist, das, was Sie ment?
Aus der Fußzeile
und gab den Inhalt
UPDATE:, die ich gesehen habe die Lösung über mir wird nicht das problem lösen, wenn Sie viel text in den Inhalt gehen unter es.
AKTUALISIERT LINK: http://jsfiddle.net/7gPzF/42/
Ich hoffe, dass ich dir geholfen habe.
Wenn Sie nicht wissen, die Höhe der Kopf-und Fußzeile können Sie Javascript-Lösung.
Wie diese:
Deinem Beispiel:
http://jsfiddle.net/7gPzF/41/