Max-Höhe auf border-Box div mit padding ist nicht gesetzt

Verwenden wir den Prozentsatz trick auf Polstern "Seitenverhältnis beibehalten", um ein div-Element, wenn die user-Skalen seinem Fenster. Wie diese:

.div {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20%;
}

Nun würden wir gerne in der Lage sein, eine maximale Höhe für das div. Denn die Höhe des div wird bestimmt durch das padding für die div-wir müssten das div zu sein border-Box. So weit So gut. Bei dem Versuch, eine min-height auf das div, das funktioniert. Die max-height auf das div jedoch nicht aus irgendeinem Grund arbeiten.

.div {
    max-height: 60px;
}

Erstellte ich ein Turnschuh, Ihnen zu zeigen, was ich meine: http://jsfiddle.net/UxuEB/3/.

Getestet auf Chrome, FF und IE. Kann jemand mir sagen, was ich falsch mache oder warum das nicht funktioniert wie erwartet?

InformationsquelleAutor Iggy van Lith | 2014-02-13
  1. 10

    Eigentum max-height arbeitet auf der height des Elements und möchten Sie es verwenden, auf die height und padding-bottom.

    Ich denke, Sie sind verwirrt durch die box-sizing Eigenschaft, dass es änderungen der element-Höhe der overal Höhe einschließlich der Polsterung, oben und unten (auch mir). Aber dies ist nicht der Fall, wie Sie sehen werden, in der jsFiddle-Beispiel.

    Beispiel:

    • Das element mit Inhalt 100px in der Höhe.
    • Die max-height eingestellt ist 50px (element ist nun 50px in der Höhe).
    • Jetzt wenden wir die padding-bottom von 100px (mehr als die Höhe des Elements). Die Polsterung von 100px ist Hinzugefügt, um die Gesamthöhe des Elements, so dass es 150px.

    JsFiddle Beispiel: clicky

    • Nach w3 w3.org/TR/css3-ui/#box-sizing, wenn border-box gesetzt ist, wird die Höhe berechnet werden soll, durch Abzug der border-width und Polster von der Höhe. Die min-height funktioniert wie ich es erwarten würde, warum nicht die max-Höhe arbeiten? Was ist der Unterschied?
    • Ich denke ich bekomme es jetzt. Lesen Sie die Spezifikation einige mehr. Genau wie du gesagt hast, der box-sizing-Eigenschaft nicht ändern, die element-Höhe für die Berechnung der Höhe. In den üblichen Fällen scheint es zu funktionieren, aber in diesem Fall kommt es nicht. Die Höhe wird abgezogen in der Regel durch die Auffüllung und den Rand nun aber die Höhe ist 0 und kann nicht kleiner werden als 0, so ist die Polsterung hält die Festlegung der Höhe dieses div. Dies ist auch der Grund, min-height funktioniert nicht, es macht die gesamte Höhe höher als 0 und nicht weniger. Vielen Dank für deine Erklärung. Irgendwelche Ideen auf, wie man mein problem?
    • Naja ich diskutierte mit Kollegen, und wir coudn ' T finden eine echte Lösung für Ihren Fall, da die Prozentsätze in die Polsterung macht es schwer, sorry. Über die min-height, der in deinem Beispiel funktioniert, weil die Polsterung (1%) war weniger als die min-height des Elements.
    InformationsquelleAutor Sven van Zoelen
  2. 11

    Merke ich, dass diese Antwort kommt unglaublich spät, um die Partei aber ich habe versucht, dies zu lösen, genau die gleiche Sache heute, und diese Frage ist das erste Ergebnis in Google. Landete ich die Lösung mit dem untenstehenden code so hoffentlich hilft jemand in der Zukunft.

    Ersten, fügen Sie eine zusätzliche innere div:

    <div class="control control-max-height">
  <div class="control-max-height-inner">
    Max-height
  </div>
</div>

    Und legen Sie die Polsterung auf, die beim verstecken der überlauf auf dem äußeren div:

    .control {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.control-max-height {
    max-height: 120px;
    overflow: hidden;
}

.control-max-height-inner {
    padding-bottom: 20%;
}

    Dies natürlich vorausgesetzt, Sie sind gut versteckt, ein Teil der das innere element, wenn es überläuft. In meinem Fall war dies kein problem, weil das innere element ist nur ein leerer link-element, um das ganze anklickbar ist und das äußere element hat nur eine zentriert das Hintergrundbild und einen Rahmen gesetzt.

    Sehen fiddle: http://jsfiddle.net/UxuEB/7/

    • genau das, was ich suchte. Danke!!!
    • overflow: hidden; war meine fehlende Stück. Danke!
    InformationsquelleAutor Mike
  3. 3

    Sich von Mike ' s Antwort, das gleiche kann erreicht werden mit einer einzigen DOM-element & ein pseudo-element, zB.

    html:

    <div class="le-div"></div>

    css:

    div.le-div {
  max-height: 200px;
  /* ? only necessary if applying any styles to the pseudo element
     other than padding:

     overflow: hidden;
  */

}

div.le-div::before {
  content: '';
  display: block;
  padding-bottom: 60%;
}
    • Dies sollte akzeptiert werden Antwort, habe es ausprobiert und hat wunderbar funktioniert, vielen Dank
    • Ja, die Polsterung ist das Hauptproblem.
    InformationsquelleAutor Brad Adams
Schreibe einen Kommentar