Ich benutze diese css eine <div> auf maximale Höhe einstellenheight: 100% VS min-height: 100%
Kann jemand geben Sie mir eine allgemeine Antwort, was ist der Unterschied zwischen height: 100% und min-height: 100%?
Hier ist eine Erklärung des W3C (link):
Der folgende Algorithmus beschreibt, wie die beiden Eigenschaften [min-height und max-height] den verwendeten Wert der 'Höhe' Eigenschaft beeinflussen:
Die vorläufig verwendete Höhe wird berechnet (ohne 'min-height' und 'max-height') gemäß den oben unter "Berechnung von Höhen und Rändern" beschriebenen Regeln.
Wenn diese vorläufige Höhe größer ist als 'max-height', werden die obigen Regeln erneut angewendet, wobei diesmal jedoch der Wert von 'max-height' als berechneter Wert für 'height' verwendet wird.
Wenn die resultierende Höhe kleiner als 'min-height' ist, werden die obigen Regeln erneut angewendet, wobei diesmal der Wert 'min-height' als berechneter Wert für 'height' verwendet wird.
Zusammenfassend: Wenn die Mindesthöhe größer ist als die Höhe sonst (ob eine explizite Höhe angegeben ist oder nicht), wird die Mindesthöhe als Höhe verwendet. Wenn die Mindesthöhe kleiner als die Höhe ist, hat die Mindesthöhe keine Auswirkung.
Für den spezifischen Fall geben Sie unter Angabe height:100% macht die Höhe des Elements gleich der Höhe des umschließenden Blocks. (Dies könnte jedoch möglicherweise außer Kraft gesetzt werden, z. B. wenn Sie auch max-height:50% angegeben haben.) Wenn Sie min-height:100% angeben, bedeutet dies, dass die berechnete Höhe weniger als 100% beträgt, selbst wenn Sie eine Höhe von weniger als 100% explizit angegeben haben Sie sagten height:100%. Beachten Sie, dass ein Schlüsselunterschied darin besteht, dass max-height die Höhe überschreiben kann, aber min-height nicht überschreiben kann (da die maximale Höhe nach der Höhe, aber vor der minimalen Höhe gemäß der oben zitierten W3C-Empfehlung berücksichtigt wird).
Höhe wird Ihr Element auf eine Größe von 100% seines Containers setzen.
min-height wird das Element setzt 100% der Behältergröße
aber warum sollte man das auf jeden Fall tun will min? wenn min-height 100% ist, wird es keine Auswirkungen meiner Meinung nach hat ...
nach einigen Recherchen in IE7 könnte es Ihnen eine Lösung für ein Problem:
http://www.search-this.com/2007/02/05/css-min-height-explained/
height: 100% gehen auf 100% der Behälterhöhe; min-height: 100% sollte bei Bedarf auch über die Höhe des Containers hinausgehen.
Beachten Sie, dass Min-Höhe in IE nicht unterstützt wird.
Die einzige praktische Verwendung, die ich von Min-Höhe gesehen habe, ist eine Fußzeile an den unteren Rand der Seite zu kleben.Betrachten Sie den folgenden Code ein:
<html>
<head></head>
<body style="height: 100%">
<div style="height: 100%">
<div style="height: auto; min-height: 100%; background-color: blue;">
<div class="main" style="padding-bottom: 300px;">
</div>
</div>
<div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div>
</div>
</body>
</html>
Die rot an der Unterseite der Sichtöffnung stecken, wenn die Haupt div leer ist, und wie Sie die wichtigsten div mit Inhalt füllen, die rote Fußzeile klebt noch auf den Grund der Seite.
Um den Punkt zu verdeutlichen, wenn Sie nur Höhe: 100% auf das Hauptdiv und füllen Sie es mit Inhalt, wird die rote Fußzeile am unteren Rand des Ansichtsfensters schweben. Die Höhe, die als 100% angegeben wird, erweitert das Haupt-div nicht über die Grenzen des Ansichtsfensters hinaus, wie dies bei der Deklaration der Höhe der Fall ist: auto; Mindesthöhe: 100%.
Entschuldigung, mein Herr, aber können Sie die Bedeutung von "height: auto" in der "main" Klasse erklären? Ich habe diesen Ausdruck in mehreren Beispielen von height100% Layouts gesehen. Einige sogar "Höhe: Auto! Wichtig". Ich verstehe jedoch nicht, wie sich diese Regel verhält – Dan
fyi min-height wird nicht von allen Browsern unterstützt – marcgg
Nur wenn Sie IE <= 6 als Browser markieren. Alles darüber hinaus unterstützt es. – BalusC