CSS 100% Höhe mit Polsterung / Rand

813

Wie kann ich mit HTML / CSS ein Element erstellen, dessen Breite und / oder Höhe 100% des übergeordneten Elements beträgt und das dennoch über die richtigen Auffüllungen oder Ränder verfügt?

Durch die „richtigen“ Ich meine , dass , wenn meine Eltern - Element ist 200pxgroß und ich angeben , height = 100%mit padding = 5pxich würde erwarten , dass ich einen bekommen soll 190pxmit hohem Elemente border = 5pxauf allen Seiten, schön im Elternelement zentrierte.

Jetzt weiß ich, dass das Standard-Box-Modell nicht vorschreibt, dass es funktionieren soll (obwohl ich genau wissen möchte, warum ...), daher funktioniert die offensichtliche Antwort nicht:

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

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

Oh, und fürs Protokoll, ich bin nicht sonderlich an IE-Kompatibilität interessiert, so dass (hoffentlich) die Dinge ein bisschen einfacher werden sollten.

EDIT: Da nach einem Beispiel gefragt wurde, ist hier das einfachste, das 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 Black Box mit einem 25-Pixel-Abstand an allen Kanten anzuzeigen, ohne dass die Seite groß genug wird, um Bildlaufleisten zu erfordern.

css

— Toji
quelle

Ich habe festgestellt, dass diese beiden Lösungen am zuverlässigsten sind: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ Haben Sie einen bestimmten HTML- Code ? können wir sehen und damit spielen?

— Nick Presta

stackoverflow.com/questions/3931187/…

— Ben

755

Ich habe gelernt, wie man solche Dinge macht, indem ich " PRO HTML und CSS Design Patterns " lese . Das display:blockist der Standardanzeigewert für div, aber ich möchte es explizit machen. Der Container muss vom richtigen Typ sein; positionAttribut ist fixed, relativeoder absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Erweitern Sie das Snippet

Geige nach Nooshus Kommentar

— Frank Schwieterman
quelle

42

Hervorragende Lösung, wird diese mit einem Lesezeichen versehen. Fügte es einfach schnell zu jsfiddle.net/Rpdr9 für alle hinzu, die eine Live-Demo wollen. Hoffe es macht dir nichts aus.

— Nooshu

16

Während @Toji sich nicht um die IE-Kompatibilität kümmerte, muss ich das leider tun. Diese Lösung funktionierte zunächst nicht unter IE6. Das Hinzufügen von IE9.js von Dean Edwards zur Seite hat diese Arbeit gemacht. Jetzt muss ich nur noch hoffen und beten, dass die relative / absolute Positionierung nichts mit einem untergeordneten Element

— Christopher Parker

24

-1 (obwohl es so aussieht, als wäre ich hier eine Minderheit: P). Dies setzt voraus, dass die Box absolut positioniert werden kann; Leute, die pos: abs bereits überbeanspruchen, brauchen diese Munition nicht. Nehmen Sie dieses Beispiel: Ein Div "Panels" mit mehreren Divs der Klasse "Panel". "Panels" hat {Überlauf: versteckt; height: 300px;} und "panel" haben unterschiedliche Inhalte / Inhaltshöhen mit {border: # 000 solid 1px; float: left; Rand rechts: 10px;}. Stellen Sie alle "Felder" auf die Höhe von "Feldern" ein, ohne an irgendeiner Stelle Ränder zu verlieren. Die "Panel" -Divs können hier nicht pos: abs'd sein. Die Lösung von @ Marco funktioniert jedoch für dieses Szenario.

— Eternicode

8

Oh wow, ich verstehe. Der top:0, bottom:0im wesentlichen "Stretch" aus dem Elemente. Ich kann es aber nur zum position:absoluteLaufen bringen

— Matt

7

Könnten Sie das nicht einfach tun, top:20px;bottom:20px;left:20px;right:20px;anstatt überhaupt Ränder zu verwenden?

— Chowey

391

In CSS3 gibt es eine neue Eigenschaft , mit der Sie die Art und Weise ändern können, wie das Box-Modell Breite / Höhe berechnet. Diese wird als Box-Größe bezeichnet.

Wenn Sie diese Eigenschaft mit dem Wert "border-box" festlegen, wird das Element, auf das Sie es anwenden, beim Hinzufügen eines Auffüllers oder Rahmens nicht gedehnt. Wenn Sie etwas mit einer Breite von 100 Pixel und einer Polsterung von 10 Pixel definieren, ist es immer noch 100 Pixel breit.

box-sizing: border-box;

Hier finden Sie Informationen zur Browserunterstützung . Es funktioniert nicht für IE7 und niedriger, aber ich glaube, dass Dean Edwards IE7.js Unterstützung dafür hinzufügt. Genießen :)

— Marco Jardim
quelle

45

Schließlich! Ich habe jetzt seit ungefähr 10 Jahren auf genau diese Funktion gewartet. Schade, dass IE7 es nicht unterstützt, aber ich denke immer, dass Leute, die immer noch IE verwenden, kein schönes Layout verdienen.

— Cronoklee

2

Dies funktionierte bei iPhone / Safari und dem Standardbrowser von Android für mich, während die oben positionierte absolut positionierte Lösung nicht funktionierte.

— Spud

18

Dies ist im Grunde das gleiche wie das Quirks-Mode-Box-Modell des IE . Ich finde es lustig, wie jeder auf IE hasst, aber jetzt border-boxist jeder Held :)

— Matt Greer

14

Zu Ihrer Information, das Browserpräfix für die Boxgröße wird jetzt für alle außer -moz gelöscht. Siehe paulirish.com/2012/box-sizing-border-box-ftw und die Kommentare für eine gute Diskussion

— Aponzani

3

Ja! Das ist die richtige Antwort! 100% Größe skaliert die Dinge jetzt korrekt im Verhältnis zu ihren Eltern, ohne dass sie überlaufen. Würde eine Million +1 geben, wenn ich könnte.

— Andrew Mao

65

Die Lösung besteht darin, Höhe und Breite NICHT zu verwenden! Befestigen Sie die innere Box oben, links, rechts, unten und fügen Sie dann einen Rand hinzu.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

Erweitern Sie das Snippet

— Amolk
quelle

6

Up-Vote, weil Sie technisch korrekt sind, aber es ist auch im Grunde die gleiche Antwort wie bei Frank (was meiner Meinung nach ein bisschen freundlicher für die schlampigeren Browser da draußen ist.)

— Toji

39

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 nur sicher, dass Sie den Abstand zwischen den Werten und dem Operator nicht vergessen (z. B. (100%-5px)wird dadurch die Syntax verletzt. Viel Spaß!

— Brian Aderer
quelle

6

Schöne Lösung.

— Denken Sie

5

Würde dies nicht tatsächlich 100% Breite und Höhe für jede PLUS 5px-Polsterung geben, da die Polsterung das Element effektiv um 10px breiter bzw. größer machen würde?

Endlich eine gute Lösung, und nicht wie der Rest von ihnen topfst du oben, rechts, unten und links auf 0, das funktioniert nur mit Position: absolut;

— Gil Epshtain

Ich denke, das Richtige ist: #myDiv {width: calc (100% - 10px); Höhe: berechnet (100% - 10 Pixel); Polsterung: 5px; } 5 von links und 5 von rechts = 10, 5 von oben und 5 von unten = 10

— Chris P

21

Gemäß 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 Pixel, 100% Höhe = 1024 Pixel.

Die Mindesthöhe bezieht sich auf die Gesamthöhe der Seite einschließlich des Inhalts auf einer Seite, auf der der Inhalt größer als 1024 Pixel ist. Mindesthöhe: 100% werden gedehnt, um den gesamten Inhalt einzuschließen.

Das andere Problem ist dann, dass in den meisten modernen Browsern mit Ausnahme von ie6 Polsterung und Rahmen 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 gibt Ihnen tatsächlich 100% + 5px + 5px für die Höhe. 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>

— Alex
quelle

4

@Alex: Aber was macht den inneren Div (den gepolsterten) 100% der Höhe des äußeren Div. Ich habe die Erfahrung gemacht, dass man in einem größeren Div in voller Höhe nur ein kleines kurzes Div bekommt.

— Lawrence Dol

8

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

— Aufkleber
quelle

7

Dies ist eine der absoluten Idiokien von CSS - ich habe die Argumentation noch nicht verstanden (wenn jemand weiß, bitte erklären).

100% bedeutet 100% der Behälterhöhe - zu der alle Ränder, Ränder und Polsterungen hinzugefügt werden. Es ist also praktisch unmöglich, einen Container zu erhalten, der das übergeordnete Element ausfüllt und einen Rand, einen Rand oder eine Polsterung aufweist.

Beachten Sie auch, dass das Einstellen der Höhe auch zwischen Browsern notorisch inkonsistent ist.

Eine andere Sache, die ich gelernt habe, seit ich dies gepostet habe, ist, dass der Prozentsatz relativ zur Länge des Containers ist ist, dh zur Breite, was einen Prozentsatz für die Höhe noch wertloser macht.

Heutzutage sind die Ansichtsfenstereinheiten vh und vw nützlicher, aber für nichts anderes als die Container der obersten Ebene immer noch nicht besonders nützlich.

— Lawrence Dol
quelle

Es gibt keine Gründe, nur was passiert ist, als Browser anfingen, sich einem konsistenten Verhalten anzunähern. Schauen Sie sich das in meiner Antwort erwähnte Buch an.

— Frank Schwieterman

Upvoted für die Verwendung des richtigen Begriffs. Tex und jeder Layout-Manager, den ich gesehen habe, haben es richtig gemacht, nur CSS muss etwas Besonderes sein.

— Maaartinus

5

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

Sie können dem übergeordneten Element eine Höhe und Breite festlegen und Polster hinzufügen, ohne es zu erweitern. Das Kind hat 100% Größe und Breite abzüglich der Polster.

JSBIN

Eine andere Möglichkeit wäre die Verwendung der Box-Sizing-Eigenschaft. Das einzige Problem mit beiden wäre, dass sie in IE7 nicht funktionieren.

— user1721135
quelle

4

Eine andere Lösung: Sie können prozentuale Einheiten sowohl für Ränder als auch für Größen verwenden. Zum Beispiel:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Das Hauptproblem hierbei ist, dass die Ränder mit der Größe des übergeordneten Elements leicht zunehmen / abnehmen. Vermutlich möchten Sie, dass die Ränder konstant bleiben und das untergeordnete Element wächst / schrumpft, um Änderungen im Abstand auszugleichen. Je nachdem, wie eng Ihr Display sein muss, kann dies problematisch sein. (Ich würde auch eine kleinere Marge anstreben, wie 0,3%).

— ktbiz
quelle

3

Eine Lösung mit Flexbox (arbeitet an IE11): ( oder Ansicht auf jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(Das Zurücksetzen des CSS ist für das eigentliche Problem nicht unbedingt wichtig.)

Der wichtige Teil ist flex: 1(in Kombination mit display: flexbeim Elternteil). Witzigerweise stammt die plausibelste Erklärung, die ich für die Funktionsweise der Flex-Eigenschaft kenne, aus einer reaktionsnativen Dokumentation, daher verweise ich trotzdem darauf :

(...) flex: 1, mit dem eine Komponente angewiesen wird, den gesamten verfügbaren Speicherplatz zu füllen, der gleichmäßig auf andere Komponenten mit demselben übergeordneten Element verteilt wird

— Putzi San
quelle

2

Franks Beispiel hat mich ein wenig verwirrt - es hat in meinem Fall nicht funktioniert, weil ich die Positionierung noch nicht gut genug verstanden habe. 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, in dem das Kind - mit einer Polsterung und einem Rand - die absolute Position verwendet, um das Elternteil zu 100% zu füllen. Der Elternteil verwendet die relative Positionierung, um einen Bezugspunkt für die Position des Kindes bereitzustellen, während er im normalen Fluss 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

— Peter Tseng
quelle

0

Rand um div und nicht um den Seitenkörperrand

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

Border-Box funktionierte nicht und die feste Positionierung schien für ein so einfaches Bedürfnis falsch zu sein.

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

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

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

— Kris Randall
quelle

0

Dies ist das Standardverhalten von. display: blockDer schnellste Weg, dies im Jahr 2020 zu beheben, besteht darin, das display: 'flex'übergeordnete Element und die Polsterung festzulegen, z. B. 20 Pixel. Dann haben alle untergeordneten Elemente eine Höhe von 100% im Verhältnis zu ihrer Höhe.

— Freestyle09
quelle

0

Das Hinzufügen von -webkit und -moz wäre angemessener

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

— user3113626
quelle

-2

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>

— Mujassir Nasir
quelle