CSS - Höhe von 100% minus #px - Kopf- und Fußzeile

Question

Die Webseite in Frage wie folgt aussieht:

// The Header // 
/*   */ 
/* CONTENT */ 
/*   */ 
// The footer // 

Sowohl die Kopf- und Fußzeilen Höhen behoben haben. Sagen wir zum Beispiel, dass beide eine Höhe von 20px haben. Ich muss die Höhe des Inhalts auf 100% minus 40px (Kopf- und Fußzeilenhöhe) einstellen. Ich weiß, dass ich das problemlos mit JavaScript machen kann, aber es wäre cool, wenn es möglich wäre, es mit einfachem CSS zu machen.

Answer 1

#header /* hypothetical name */ 
{ 
    height:100%; 
} 

#header p /* or any other tag */ 
{ 
    margin:20px 0 20px 0; 
} 

Stellen Sie sicher, dass Rand und Höhe nicht im selben Tag platziert werden. Sie werden einige verrückte Ergebnisse erleben.

Answer 2

Platzieren Sie eine feste Position auf der Kopfzeile und der Fußzeile, und legen Sie sie so fest, dass sie jeweils an den oberen Rand des Fensters geklebt werden. Platzieren Sie dann einen oberen und unteren Padding auf dem Inhaltsbereich von 20px.

#header{position:fixed;top:0} 
#footer{position:fixed;bottom:0} 
#content{padding:20px 0} 

Answer 3

Dieses Beispiel scheint die robusteste Methode zu zeigen. Eigentlich ist es im IE etwas fehlerhaft, weil die Größenanpassung manchmal falsch ist. Nämlich, wenn Sie aus der unteren rechten Ecke eine Größenänderung machen und nur eine vertikale Größenänderung von Hand machen (ziemlich schwer manchmal), wird die Seite im IE nicht aktualisiert. Ich hatte das gleiche Problem damit und habe es nur wegen JS wegen anderer Ereignisse auf meiner Webseite repariert.

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

Marnix Antwort beinhaltet die obere und die untere Polsterung des Inhaltselements verwendet wird; meins beinhaltet die Verwendung der oberen und unteren Grenze.

stolperte ich auf diese Lösung auf meinem eigenen bei dem Versuch, herauszufinden, wie man etwas ähnliches ohne Rückgriff auf Tabellen tun: Das zentrale Element in der Höhe von 100%, aber stellen Sie dann die Box-Sizing-Modell „border-box "(Damit die Höhe nicht nur den Inhalt innerhalb der Box enthält, sondern auch die Rahmen um die Box), machen Sie die oberen und unteren Ränder wirklich dick (wie zB 20px) und verwenden Sie dann eine feste Positionierung, um die Kopf- und Fußzeile zu überlagern die verrückt-dicken oberen und unteren Grenzen des zentralen Elements.

Hier ist mein Beispiel CSS:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#content { 
    height: 100%; 

    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
     /* Ensure that the height of the element includes the 
     box border, not just the content */ 

    border: 0; 
    border-top: 20px solid white; 
    border-bottom: 20px solid white; 
     /* Leave some space for the header and footer to 
     overlay. */ 
} 
#header, 
#footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 20px; 
    background-color: #eee; 
     /* Specify a background color so the content text doesn't 
     bleed through the footer! */ 
} 
#header { 
    top: 0; 
} 
#footer { 
    bottom: 0; 
} 

Dies funktioniert in Google Chrome 24 für Mac. Ich habe es in anderen Browsern jedoch nicht ausprobiert.

Hoffentlich wird dies jemand anderen helfen, der immer noch der Versuchung gegenübersteht, einfach einen Tisch zu benutzen und das Seitenlayout bereits fertigzustellen. :-)

Answer 5

Falls Ihr Browser CSS3 unterstützt, versuchen Sie das CSS-Element mit Calc()

height: calc(100% - 65px); 

Sie auch die Kompatibilität Optionen zum Hinzufügen Browser möchten:

height: -o-calc(100% - 65px); /* opera */ 
height: -webkit-calc(100% - 65px); /* google, safari */ 
height: -moz-calc(100% - 65px); /* firefox */