working - width height css




CSS 100% Höhe mit Polsterung/Rand (8)

Umrandung um div und nicht um Seitenrand

Eine andere Lösung - Ich wollte nur eine einfache Grenze um den Rand meiner Seite, und ich wollte 100% Höhe, wenn der Inhalt kleiner als das war.

Border-Box hat nicht funktioniert, und die feste Positionierung schien falsch für solch ein einfaches Bedürfnis.

Ich habe am Ende einen Rahmen zu meinem Container hinzugefügt, anstatt mich auf den Rand des Seitenkörpers zu verlassen - er sieht so aus:

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

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

Das macht mich schon seit ein paar Tagen verrückt, aber in Wirklichkeit ist es ein Problem, das ich in den letzten Jahren immer wieder durchgemacht habe: Mit HTML / CSS kann ich ein Element erstellen, das eine Breite und / oder Breite hat Höhe, die 100% von seinem Elternelement ist und noch richtige Polsterung oder Ränder hat?

Mit "richtig" meine ich, dass, wenn mein Elternelement 200px groß ist und ich height = 100% mit padding = 5px würde ich erwarten, dass ich ein 190px high Element mit border = 5px auf allen Seiten, schön zentriert im Elternelement bekommen sollte .

Nun, ich weiß, dass das Standard-Box-Modell nicht angibt, dass es funktionieren sollte (obwohl ich gerne wissen möchte, warum genau ...), so dass die offensichtliche Antwort nicht funktioniert:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Aber es scheint mir, dass es einen Weg geben muss, diesen Effekt zuverlässig für ein Elternteil beliebiger Größe zu erzeugen. Kennt jemand eine Art, diese (scheinbar einfache) Aufgabe zu erfüllen?

Oh, und für den Rekord bin ich nicht so sehr an der IE-Kompatibilität interessiert, die (hoffentlich) die Dinge ein bisschen leichter machen sollte.

EDIT: Da ein Beispiel gefragt wurde, hier ist die einfachste, die ich mir vorstellen kann:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Die Herausforderung besteht dann darin, die Blackbox mit einem 25-Pixel-Padding an allen Kanten erscheinen zu lassen, ohne dass die Seite groß genug wird, um Scrollbalken zu benötigen.


Der bessere Weg ist mit der Eigenschaft calc (). Ihr Fall würde also so aussehen:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Einfach, sauber, keine Problemumgehungen. Stellen Sie sicher, dass Sie den Abstand zwischen den Werten und dem Operator nicht vergessen (zB (100% -5px), der die Syntax sprengt. Viel Spaß!


Dies ist eine der absoluten Idiotiken von CSS - ich muss die Argumentation noch verstehen (wenn jemand das weiß, bitte erklären).

100% bedeutet 100% der Containerhöhe - zu der alle Ränder, Rahmen und Abstände hinzugefügt werden. Es ist also praktisch unmöglich, einen Container zu bekommen, der seine Eltern füllt und der einen Rand, einen Rand oder eine Auffüllung hat.

Beachten Sie auch, dass die Einstellung der Höhe zwischen Browsern ebenfalls inkonsistent ist.

Eine andere Sache, die ich gelernt habe, seit ich das geschrieben habe, ist, dass der Prozentsatz relativ zur Länge des Containers ist, das heißt, es ist die Breite, was einen Prozentsatz noch wertloser für die Höhe macht.

Heutzutage sind die Viewport-Einheiten vh und vw nützlicher, aber immer noch nicht besonders nützlich außer den Top-Level-Containern.


Eine andere Lösung ist die Verwendung von display: table, die ein anderes Boxmodell-Verhalten aufweist.

Sie können dem übergeordneten Element eine Höhe und eine Breite zuweisen und das Auffüllen hinzufügen, ohne es zu erweitern. Das Kind hat 100% Höhe und Breite minus die Polsterungen.

JSBIN

Eine andere Option wäre die Verwendung von Box-Sizing-Eigenschaften. Das einzige Problem bei beiden wäre, dass sie nicht im IE7 funktionieren.


Entsprechend der w3c-Spezifikation bezieht sich die Höhe auf die Höhe des sichtbaren Bereichs, z. B. auf einem Monitor mit einer Auflösung von 1280 x 1024 Pixeln, 100% Höhe = 1024 Pixel.

min-height bezieht sich auf die Gesamthöhe der Seite einschließlich des Inhalts, also auf einer Seite, auf der der Inhalt größer als 1024px min-height ist: 100% werden so gestreckt, dass sie den gesamten Inhalt enthalten.

Das andere Problem ist dann, dass Padding und Rahmen in den meisten modernen Browsern mit Ausnahme von ie6 zur Höhe und Breite hinzugefügt werden (ie6 ist eigentlich ziemlich logisch, entspricht aber nicht der Spezifikation). Dies wird als Box-Modell bezeichnet. Also wenn Sie angeben

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

Es wird Ihnen tatsächlich 100% + 5px + 5px für die Höhe geben. Um dies zu umgehen, benötigen Sie einen 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>

Franks Beispiel verwirrte mich ein wenig - es funktionierte in meinem Fall nicht, weil ich die Positionierung noch nicht gut genug verstanden hatte. Es ist wichtig zu beachten, dass das übergeordnete Containerelement eine nicht-statische Position haben muss (er erwähnte dies, aber ich habe es übersehen, und es war nicht in seinem Beispiel).

Hier ist ein Beispiel, bei dem die vom Kind angegebene Füllung und ein Rand eine absolute Positionierung verwenden, um den Elternteil zu 100% zu füllen. Das Elternelement verwendet eine relative Positionierung, um einen Referenzpunkt für die Position des Kindes bereitzustellen, während es im normalen Ablauf bleibt - 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>

Ein nützlicher link zum schnellen Erlernen der CSS-Positionierung


In CSS3 gibt es eine neue Eigenschaft , mit der Sie die Art und Weise ändern können, wie das Boxmodell Breite / Höhe berechnet. Dies wird Box-Sizing genannt.

Wenn Sie diese Eigenschaft mit dem Wert "border-box" festlegen, wird das Element, auf das Sie es anwenden, nicht gedehnt, wenn Sie einen Füll- oder Rahmen hinzufügen. Wenn Sie etwas mit 100 Pixel Breite und 10 Pixel Abstand definieren, ist es immer noch 100 Pixel breit.

box-sizing: border-box;

Siehe hier für die Browserunterstützung . Es funktioniert nicht für IE7 und niedriger, aber ich glaube, dass Dean Edwards IE7.js Unterstützung dafür IE7.js . Genießen :)


1. Volle Höhe mit padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

2. Volle Höhe mit margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>

3. Volle Höhe mit border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>





css