Ist es möglich, dies ohne JavaScript (HTML-Layout)

Question

Die Seite hat das folgende Layout zu tun:

<div id="main" style="min-height:500px;"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
<div> 

Der Haupt div eine feste Höhe oder min-Höhe aufweisen kann (style="height:500px;" oder style="min-height:375px;").

Ist es möglich, die Fußzeile und Kopfzeile so viel Höhe nehmen, wie sie brauchen und den Inhalt den Rest zu nehmen (content.height = main.height - (header.height + footer.height)) (ohne Verwendung von JavaScript, elastische Kopf- und Fußzeile, Inhalt übernimmt den Rest)?

Answer 1

Um einfach CSS-Fußzeile zu verwenden, muss feste Größe haben.

Answer 2

Ja, es ist ist möglich.

HTML:

<div id="main"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
<div> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; /* needed for #main min-height */ 
} 

div#main { 
    position: relative; /* needed for footer positioning */ 
    height: auto !important; /* real browsers */ 
    height: 500px; /* IE6: treated as min-height*/ 
    min-height: 500px; /* real browsers */ 
} 

div#header { 
    /* Will be as high as its content */ 
} 

div#content { 
    /* Will be displayed below #header regardless to its height */ 
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */ 
} 

div#footer { 
    position: absolute; 
    width: 100%; 
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */ 
    bottom: 0; /* stick to bottom */ 
} 

Dies ist eigentlich nicht setzen #content Höhe, wie man wollte, zeigt aber alles wie es sein sollte (#main Höhe erwartet hat, ist #footer bei der Boden und deckt nicht #content ab).

Answer 3

Die einzige Lösung, die ich gefunden ...

für eine geringe Höheneinstellung (nicht richtig in IE6/7 funktioniert) für die oberen und unteren Reihen und keine Höhen

<table height="500" cellpadding="0" cellspacing="0" border="0"> 
    <tr height="1"><td>Header goes here</td></tr> 
    <tr><td>Main content goes here</td></tr> 
    <tr height="1"><td>Footer goes here</td></tr> 
</table> 

Der entscheidende Punkt ist Einstellung die mittlere Reihe. Dies ermutigt den Browser, die oberste und unterste Zeile so klein wie möglich zu halten und die mittlere Zeile zu verwenden, um ungenutzten Speicherplatz zu belegen. Aber IE6/7 ignoriert dies und versucht, den ungenutzten Platz gleichmäßig über alle 3 Zeilen zu verteilen.

Dennoch kann dies der nächste sein, den Sie ohne Verwendung von JavaScript erhalten können (oder Hinzufügen eines IE-spezifischen CSS-Ausdrucks (d. H. Dynamische Eigenschaft) irgendeiner Art, den ich nicht empfehlen würde).

HTML-Tabellen sind die einzige Option, die ein gewisses Maß an Kontrolle über das vertikale Layout (Größe und Ausrichtung) bietet, ohne JavaScript zu verwenden. Wenn Sie das brauchen, ist eine HTML-Tabelle der richtige Weg. Aber Sie sollten besser innerhalb der Grenzen von CSS-basierten Layouts bleiben.