CSS 100% Höhe mit padding/margin

Question

CSS 100% Höhe mit padding/margin

Gefragt el 28 de Januar, 2009: Wann wurde die Frage gestellt
375682 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Wie kann ich mit HTML/CSS ein Element erstellen, das eine Breite und/oder Höhe hat, die 100% des übergeordneten Elements beträgt, und trotzdem die richtigen Abstände oder Ränder hat?

Mit "richtig" meine ich, dass ich, wenn mein übergeordnetes Element 200px groß und ich spezifiziere height = 100% con padding = 5px Ich würde erwarten, dass ich eine 190px hohes Element mit border = 5px auf allen Seiten, schön zentriert im übergeordneten Element.

Nun, ich weiß, dass das Standard-Box-Modell dies nicht vorsieht (obwohl ich gerne wüsste, warum genau...), also funktioniert die offensichtliche Antwort nicht:

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

Aber es scheint mir, dass es irgendeinen Weg geben muss, um diesen Effekt für ein Elternteil beliebiger Größe zuverlässig zu erzeugen. Kennt jemand eine Möglichkeit, diese (scheinbar einfache) Aufgabe zu bewältigen?

Oh, und damit das klar ist: Ich bin nicht sonderlich an IE-Kompatibilität interessiert, was die Sache (hoffentlich) ein bisschen einfacher macht.

EDIT: Da nach einem Beispiel gefragt wurde, hier das einfachste Beispiel, das mir einfällt:

<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 schwarze Box mit einem 25-Pixel-Padding an allen Rändern anzuzeigen, ohne dass die Seite so groß wird, dass Bildlaufleisten erforderlich sind.

Gefragt el 28 de Januar, 2009 von Toji

0 Stimmen

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, den wir sehen und mit dem wir spielen können?

Kommentiert el 28 de Januar, 2009 von Nick Presta

0 Stimmen

stackoverflow.com/questions/3931187/

Kommentiert el 13 de April, 2012 von Ben

Answer 1

5 Antworten

Answer 2

791voto

Frank Schwieterman Punkte 23718

Ich habe gelernt, wie man diese Art von Dingen macht, indem ich " PRO HTML- und CSS-Entwurfsmuster ". Die Website display:block ist der Standardwert für die Anzeige der div aber ich möchte es explizit machen. Der Container muss der richtige Typ sein; position Attribut ist fixed , relative o 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>

Fiddle von Nooshu's コメント

Beantwortet el 28 de Januar, 2009 von Frank Schwieterman (23718 Punkte )

0 Stimmen

Wow ... das ist eine Menge von CSS zu gehen durch, aber es scheint zu funktionieren! Das könnte das sein, wonach ich gesucht habe. Lassen Sie mich herumspielen mit ihm in ein paar mehr Szenarien, bevor ich dies als akzeptiert markieren.

Kommentiert el 28 de Januar, 2009 von Toji

0 Stimmen

Wenn Sie weitere Fragen haben, z. B. wie Sie es in einem bestimmten Kontext zum Laufen bringen, lassen Sie es mich wissen. Beachten Sie, dass die horizontalen und vertikalen verwandten Elemente unabhängig voneinander verwendet werden können, solange die Anzeige als Block und die Position als fest, absolut oder relativ eingestellt ist.

Kommentiert el 28 de Januar, 2009 von Frank Schwieterman

1 Stimmen

Ich habe es gerade in dem Zusammenhang ausprobiert, in dem ich es verwenden werde, und es funktioniert wunderbar. Ich bin immer noch überwältigt, dass es so viel Code braucht, um etwas zu tun, das eigentlich nur zwei Zeilen lang sein sollte, aber wenn es funktioniert, werde ich es nehmen! Danke!

Kommentiert el 28 de Januar, 2009 von Toji

Anzeigen 15 weitere Kommentare

Answer 3

455voto

Marco Jardim Punkte 4241

Es gibt eine neue Eigenschaft in CSS3 die Sie verwenden können, um die Art und Weise zu ändern, in der das Box-Modell Breite/Höhe berechnet, es heißt Box-Sizing.

Wenn Sie diese Eigenschaft mit dem Wert "border-box" festlegen, wird das Element, auf das Sie sie anwenden, nicht gedehnt, wenn Sie eine Füllung oder einen Rahmen hinzufügen. Wenn Sie etwas mit 100px Breite und 10px Padding definieren, wird es immer noch 100px breit sein.

box-sizing: border-box;

Siehe hier für Browserunterstützung . Es funktioniert nicht für IE7 und niedriger, aber ich glaube, dass Dean Edward's IE7.js fügt die Unterstützung dafür hinzu. Viel Spaß :)

Beantwortet el 14 de Juni, 2010 von Marco Jardim (4241 Punkte )

51 Stimmen

Endlich! Auf genau diese Funktion warte ich nun schon seit 10 Jahren. Schade, dass IE7 es nicht unterstützt, aber ich denke immer, dass Leute, die immer noch IE verwenden, kein schönes Layout verdienen.

Kommentiert el 16 de Januar, 2012 von cronoklee

2 Stimmen

Dies hat bei mir auf iPhone/Safari und im Standardbrowser von Android funktioniert, während die oben beschriebene Lösung nicht funktioniert hat.

Kommentiert el 26 de Marsch, 2012 von Spud

19 Stimmen

Dies ist im Grunde dasselbe wie IE's Macken Modus Box Modell . Ich finde es lustig, wie jeder auf IE hassen noch jetzt border-box ist der Held von allen :)

Kommentiert el 13 de April, 2012 von Matt Greer

Anzeigen 6 weitere Kommentare

Answer 4

72voto

amolk Punkte 1327

Die Lösung ist, Höhe und Breite überhaupt nicht zu verwenden! Fügen Sie den inneren Kasten mit oben, links, rechts, unten und dann Rand hinzufügen.

.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>

Beantwortet el 9 de April, 2010 von amolk (1327 Punkte )

6 Stimmen

Up-vote, weil Sie technisch korrekt sind, aber es ist auch im Grunde die gleiche Antwort wie die von Frank (die meiner Meinung nach ein bisschen freundlicher zu den schlampigeren Browsern da draußen ist).

Kommentiert el 10 de April, 2010 von Toji

Answer 5

55voto

Brian Aderer Punkte 439

Der bessere Weg ist die Eigenschaft calc(). Ihr Fall würde also wie folgt aussehen:

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

Einfach, sauber, keine Umgehungsmöglichkeiten. Stellen Sie nur sicher, dass Sie das Leerzeichen zwischen den Werten und dem Operator nicht vergessen (z.B. (100%-5px) die die Syntax brechen würde. Viel Spaß!

Beantwortet el 15 de Juni, 2013 von Brian Aderer (439 Punkte )

6 Stimmen

Schöne Lösung. Denken Sie nur daran, die Browserunterstützung zu überprüfen: Kann ich calc() verwenden?

Kommentiert el 17 de Juni, 2013 von Brett Postin

8 Stimmen

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

Kommentiert el 1 de November, 2014 von Nicht registrierter Benutzer

0 Stimmen

Endlich eine gute Lösung, und nicht wie der Rest von ihnen dort Sie Topf die oben, rechts, unten und links zu 0, das wird nur mit Position arbeiten: absolut;

Kommentiert el 20 de Januar, 2018 von Gil Epshtain

Anzeigen 1 weitere Kommentare

Answer 6

21voto

Alex Punkte 32100

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

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

Das andere Problem ist, dass die Höhe und Breite in den meisten modernen Browsern mit Ausnahme von ie6 (ie6 ist eigentlich ganz logisch, entspricht aber nicht der Spezifikation) durch Polsterung und Rahmen ergänzt werden. Dies nennt man das Box-Modell. Wenn Sie also angeben

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

Es wird tatsächlich geben Sie 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>

Beantwortet el 28 de Januar, 2009 von Alex (32100 Punkte )

4 Stimmen

@Alex: Aber was macht das innere Div (das gepolsterte) zu 100% der Höhe des äußeren Divs. Meine Erfahrung ist, dass Sie nur eine kleine kurze div innerhalb einer größeren voller Höhe div erhalten.

Kommentiert el 28 de Januar, 2009 von Lawrence Dol

CSS 100% Höhe mit padding/margin

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

CSS 100% Höhe mit padding/margin

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: