CSS 100% Höhe mit Polsterung / Rand

Es ist ein neue Eigenschaft in CSS3die Sie verwenden können, um zu ändern, wie das box-Modell berechnet, Breite/Höhe, nennt man box-sizing.

Durch das einstellen dieser Eigenschaft mit dem Wert "border-box" macht es welches element Sie es nicht Strecken, wenn Sie hinzufügen ein padding oder border. Wenn Sie definieren, was mit 100px Breite, und 10px padding, es wird immer noch 100px breit.

box-sizing: border-box;

Sehen Sie hier für die browser-Unterstützung. Es funktioniert nicht bei IE7 und niedriger, ich glaube jedoch, dass Dean Edward ' s IE7.js fügt Unterstützung für Sie. Genießen Sie 🙂

InformationsquelleAutor der Antwort Marco Jardim

Gemäß der w3c-spec-Höhe bezieht sich auf die Höhe des sichtbaren Bereichs, z.B. auf 1280x1024 pixel monitor mit einer Auflösung von 100% height = 1024 Pixel.

min-height bezieht sich auf die gesamte Höhe der Seite inklusive der Inhalte so auf einer Seite, wo der Inhalt ist größer als 1024px min-height:100% wird gestreckt, um alle den Inhalt.

Das andere problem ist, dass padding und border werden Hinzugefügt, um die Höhe und Breite in den meisten modernen Browsern außer dem ie6(der ie6 ist eigentlich ganz logisch, aber entspricht nicht der spec). Dies nennt man das box-Modell. Also, wenn Sie angeben,

min-height: 100%;
padding: 5px; 

Es wird tatsächlich geben Ihnen 100% + 5px + 5px für die Höhe. Um dies zu umgehen benötigen Sie ein wrapper-container.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

InformationsquelleAutor der Antwort Alex

Andere Lösung ist die Verwendung von display:table, die hat ein anderes box-Modell Verhalten.

Können Sie eine Höhe und Breite die Eltern, und fügen Sie die Polsterung ohne ausbau. Das Kind hat 100% Höhe und Breite abzüglich der Polster.

JSBIN

Andere Möglichkeit wäre die Verwendung von box-sizing propperty. Nur das problem mit den beiden wäre Sie funktionieren nicht im IE7.

InformationsquelleAutor der Antwort user1721135

Frank ' s Beispiel verwirrt mich ein wenig - es hat nicht funktioniert, in meinem Fall, weil ich nicht verstehen Positionierung gut genug. Es ist wichtig zu beachten, dass das übergeordnete container-element haben muss, um eine nicht-statische position (er erwähnt dies, aber ich habe es übersehen, und es war nicht in seinem Beispiel).

Hier ist ein Beispiel, wo das Kind - angesichts Polsterung und eine Grenze - verwendet die absolute Positionierung zum füllen der Eltern 100%. Das Elternteil, dass die relative Position, um einen Bezugspunkt für das Kind position, während die restlichen in den normalen Fluss - das nächste element "mehr Inhalt" ist nicht betroffen:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Nützliche link für schnell lernen, CSS-Positionierung

InformationsquelleAutor der Antwort Peter Tseng

Rahmen um div, nicht als Seite Körper-Marge

Andere Lösung - ich wollte nur einen einfachen Rahmen um den Rand meiner Seite, und ich wollte 100% Höhe, wenn der Inhalt kleiner war als das.

Border-box hat nicht funktioniert, und die Feste Positionierung schien falsch, für so eine einfache Notwendigkeit.

Ich landete hinzufügen eines Rahmens zu meinem container, anstatt sich auf den Rand des Körpers von der Seite sieht es wie folgt aus :

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

InformationsquelleAutor der Antwort Kris Randall