Sag mir, wie man das halbflüssige Layout ohne Javascript macht, ich fühle, dass ich etwas Einfaches vermisse

Okay, zuerst unterstütze ich zurück zu IE7, also Box-Sizing ist out.Sag mir, wie man das halbflüssige Layout ohne Javascript macht, ich fühle, dass ich etwas Einfaches vermisse

Ich habe eine feste Größe Kopf- und Fußzeile (sagen wir jeweils 80px) am oberen bzw. unteren Rand des Fensters positioniert.

Ich möchte ein div, um alle er Raum dazwischen aufzunehmen, unabhängig von der Fenstergröße. Einfach luftig mit JavaScript, aber gibt es einen Weg, es nur mit CSS zu tun?

Quelle

2012-03-30 ted.goodridge

Sie sollten eine klebrige Fußzeile verwenden. Beispiel: http://ryanfait.com/sticky-footer/

Quelle

2012-03-30 15:46:03

http://jsfiddle.net/ZLrPF/ basierend auf meiner klebrigen Fußzeile James Dean http://mystrd.at/modern-clean-css-sticky-footer kann das tun. IE7 würde ein bisschen mehr Liebe brauchen, was getan werden kann.

Edit:

Dies ist die IE7 + Lösung, die wie gewünscht funktioniert.

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    display: table; 
} 
#header-wrapper, #content-wrapper, #footer-wrapper { 
    display: table-row; 
} 
#header, #content, #footer { 
    display: table-cell; 
} 
#header, #footer { 
    height: 80px; 
    background-color: orange; 
} 
#content { 
    background-color: green; 
} 

<body> 
    <div id="header-wrapper"> 
     <div id="header">header</div> 
    </div> 

    <div id="content-wrapper"> 
     <div id="content">content</div> 
    </div> 

    <div id="footer-wrapper"> 
     <div id="footer">footer</div> 
    </div> 
</body>

Quelle

2012-03-30 15:59:41 mystrdat

+1, und danke für das headsup on jsfiddle. –

Danke und gern geschehen :), aber ich denke, ich habe vergessen, dass die Anforderung war, dass der Inhalt Teil den Rest der Seite füllt, auch wenn es nicht hoch genug ist, um das Fenster zu füllen - mein Beispiel macht das nicht selbst, obwohl es den Inhalt füllt und richtig schiebt, sobald die Fensterhöhe erreicht ist. Dies ist in der Tat ein ziemlich tiefes Problem und ich werde versuchen, etwas zu finden, um das zu beheben und diesen Beitrag zu aktualisieren. Min-height am Körper zu benutzen, kann es ziemlich gut funktionieren lassen, aber ich bin gespannt wie das ohne und völlig flexibel gemacht werden würde. Kann bereits Anzeige sehen: Tabellenzeile wird verwendet .. – mystrdat

Aktualisiert mit einer IE7 + -Lösung, die das Tabellenverhalten auf regulären Elementen ausnutzt und so flexibel wie gewünscht ist. – mystrdat

Sag mir, wie man das halbflüssige Layout ohne Javascript macht, ich fühle, dass ich etwas Einfaches vermisse

Antwort

Verwandte Themen