Geekly articles weekly

Min und Max Breite / Höhe Eigenschaften in CSS

Übersetzung von " Min und Max Breite / Höhe in CSS " bei Ahmad Shadid.

Manchmal müssen Entwickler die Breite des Elements relativ zum übergeordneten Element begrenzen und es gleichzeitig dynamisch lassen. Durch diese Einstellung wird die Anfangsgröße mit der Möglichkeit der Erweiterung bei Vorhandensein von verfügbarem Platz festgelegt. Zum Beispiel brauchen wir eine Schaltfläche, die eine minimale Breite haben sollte. In solchen Situationen ist es zweckmäßig, die Eigenschaften Maximum und Minimum zu verwenden.

In diesem Artikel machen wir uns mit den CSS-Eigenschaften des Maximums und des Minimums für Breite und Höhe vertraut und werfen einen detaillierten Blick auf jede dieser Eigenschaften und ihre Anwendungsfälle.

Breite Eigenschaften


Ich möchte die Diskussion mit den Eigenschaften in Bezug auf die Breite beginnen. Wir haben eine min-width und eine max-width, und jede von ihnen ist in bestimmten Situationen äußerst wichtig und nützlich.

Minimale Breite (min-width)


Die Eigenschaft min-width soll verhindern, dass die Breite des Elements unter den angegebenen Wert reduziert wird. Der Standardwert ist auto und kann bis zu 0 .

Schauen wir uns zur Veranschaulichung ein einfaches Beispiel an:



Es gibt eine Schaltfläche mit Text, dessen Größe von einem bis zu mehreren Wörtern variieren kann. Um sicherzustellen, dass diese Schaltfläche die minimal zulässige Breite hat, müssen Sie die minimale Breite verwenden, auch wenn nur ein Wort enthalten ist. Die minimale Breite wurde auf 100px festgelegt. Selbst wenn die Schaltfläche sehr kurze Inhalte enthält, z. B. nur das Wort „Fertig“ oder nur ein Symbol, ist sie dennoch groß genug, um erkennbar zu bleiben. Dies ist besonders wichtig, wenn Sie mit Websites arbeiten, die in verschiedene Sprachen übersetzt wurden.

Betrachten Sie das Beispiel in arabischer Sprache auf Twitter:



Im obigen Beispiel enthält die Schaltfläche das Wort "تم", was auf Arabisch "Finish" bedeutet. Aufgrund des kurzen Inhalts wurde die Breite der Schaltfläche selbst zu klein. Daher habe ich das Minimum durch Festlegen der Eigenschaft min-width , die im Bild rechts (im Abschnitt „After“) zu sehen ist.

Mindestbreite und Polsterung


Obwohl die Eigenschaft min-width eine Vergrößerung der Breite der Schaltfläche bei gleichzeitiger Vergrößerung des Inhalts zulässt, sollte an den Seiten ein Abstand festgelegt werden, um einen Einzug von den Rändern zu gewährleisten. Der Unterschied ist in der folgenden Abbildung dargestellt.



Maximale Breite (max-width)


Die Eigenschaft max-width soll verhindern, dass das Element über den angegebenen Wert hinaus expandiert. Der Standardwert ist none .

Ein übliches und einfaches Beispiel für die Verwendung der maximalen Breite ist die Anwendung auf Bilder. Betrachten Sie das folgende Beispiel:



Wenn wir die Eigenschaft max-width: 100% auf das Bild anwenden, bleibt es innerhalb der Grenzen des übergeordneten Elements, auch wenn die ursprüngliche Größe größer ist. Wenn das Bild anfangs kleiner als das übergeordnete Bild ist, wirkt sich diese Eigenschaft in keiner Weise auf es aus.

Verwenden von min-width und max-width




Wenn beide Eigenschaften für ein Element gelten, welche überschreibt den Wert des anderen? Mit anderen Worten, welche Immobilie hat eine höhere Priorität?

Wenn der Wert von min-width größer als max-width , wird er als Breite des Elements verwendet. Betrachten Sie das folgende Beispiel:

HTML

 <div class="wrapper"> <div class="sub"></div> </div>

CSS

 .sub { width: 100px; min-width: 50%; max-width: 100%; }



Der anfängliche Wert für die width beträgt 100px. Zusätzlich werden die Eigenschaften für die minimale min-width und die max-width festgelegt. Infolgedessen wird die Breite dieses Elements 50% der Breite des übergeordneten Blocks nicht überschreiten


Höhe Eigenschaften


Zusätzlich zu den Eigenschaften für die minimale und maximale Breite gibt es dieselben Eigenschaften für die Höhe

Mindesthöhe (min-Höhe)


Die min-height soll verhindern, dass das Element den angegebenen Wert unterschreitet. Der Standardwert ist auto und kann bis zu 0 .

Schauen wir uns zur Veranschaulichung ein einfaches Beispiel an.

Wir haben einen Abschnitt mit Textinhalten. Es ist notwendig, dass es sowohl mit großen als auch mit kleinen Textmengen schön aussieht



CSS

 .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; }

Die Mindesthöhe ist auf 100px eingestellt, und der Inhalt wird mithilfe der Flexbox horizontal und vertikal zentriert. Was passiert, wenn mehr Inhalte vorhanden sind? Zum Beispiel wird es einen ganzen Absatz geben



Ja, das hast du schon erraten. Die Höhe des Abschnitts erhöht sich, um mehr Inhalt aufzunehmen. Auf diese Weise können wir flexible Komponenten erstellen, die auf die Menge an Inhalten reagieren.

Maximale Höhe (max-Höhe)


Die max-height soll verhindern, dass ein Element seine Höhe über einen angegebenen Wert hinaus erhöht. Der Standardwert ist none .

Im folgenden Beispiel habe ich die max-height für den Inhalt festgelegt. Da es jedoch größer als der angegebene Bereich ist, tritt ein Überlauf auf und der Text überschreitet die Grenzen des übergeordneten Elements



Beispiele für die Verwendung von Eigenschaften


Betrachten Sie einige häufige und seltene Anwendungsfälle für die Eigenschaften min-width , min-height , max-width und max-height .

Tag-Liste


Es wird empfohlen, die Mindestbreite jedes Tags in der Liste der Tags anzugeben, damit das Erscheinungsbild bei kurzen Inhalten nicht beeinträchtigt wird.



Mit dieser Flexibilität sieht ein Tag gut aus, egal wie kurz sein Inhalt ist. Was passiert jedoch, wenn der Autor einen sehr großen Tag-Namen festlegt und das von ihm verwendete CMS (Content Management System) die Anzahl der Zeichen im Tag nicht begrenzt? In dieser Situation können Sie auch die max-width

CSS

 .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ }

Mit max-width Sie die maximale Breite auf einen bestimmten Wert begrenzen. Das Anwenden dieser Eigenschaft allein reicht jedoch nicht aus. Inhalte, die die maximale Breite überschreiten, müssen abgeschnitten werden.

https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

Schaltflächen


Es gibt verschiedene Szenarien für die Verwendung der minimalen und maximalen Eigenschaften für Schaltflächen, da es auch viele Optionen für die Komponenten von Schaltflächen gibt. Betrachten Sie das folgende Layout:



Bitte beachten Sie, dass die Breite des "Get" -Buttons zu klein ist. Wenn die Schaltfläche aus irgendeinem Grund immer noch keinen Text enthält (sondern nur ein Symbol), kann alles noch schlimmer werden. In diesem Fall ist die Einstellung der Mindestbreite sehr wichtig

Nullstellen der Mindestbreite für Flexbox


Der Standardwert der Eigenschaft min-width ist auto, der mit Null bewertet wird. Wenn es sich bei einem Element um ein flexibles Element handelt, wird der Wert für die min-width nicht Null. Die Mindestgröße eines Flex-Elements ist die Größe seines Inhalts.

Laut CSSWG :
Standardmäßig werden Flex-Elemente nicht kleiner als die für ihren Inhalt erforderliche Mindestgröße (die Länge des längsten Wortes oder Elements mit einer festen Größe). Um dies zu ändern, legen Sie die min-height min-width oder min-height .

Betrachten Sie das folgende Beispiel:



Der Benutzername enthält ein sehr langes Wort, das einen Überlauf und horizontales Scrollen verursacht. Obwohl ich das CSS unten hinzugefügt habe, um den Inhalt abzuschneiden:

CSS

 .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Da der Header ein flexibles Element ist, besteht die Lösung darin, den Wert für die minimale Breite zurückzusetzen und auf Null zu setzen

CSS

 .c-person__name { /*Other styles*/ min-width: 0; }

So sollte es nach dem Fix aussehen:



Aus der CSSWG- Beschreibung geht hervor, dass das Festlegen der overflow auf einen anderen Wert als den visible dazu führen kann, dass der Wert für die minimale Breite als Null berechnet wird. Dies löst auch unser Problem, ohne dass die minimale Breite explizit festgelegt werden muss min-width: 0 .


Null Mindesthöhe für Flexbox


Obwohl dies im Vergleich zur minimalen Breite ein weniger verbreitetes Problem ist, kann es dennoch auftreten. Das Problem liegt bei flexiblen Elementen, die nicht kürzer als ihr Inhalt sein können. Infolgedessen wird der Wert für die minimale Höhe auf die Größe des Inhalts festgelegt.

Betrachten Sie das folgende Beispiel:



Roter Text sollte am Rand des Containers abgeschnitten werden. Da es sich bei diesem Element jedoch um ein Flex-Element handelt, entspricht seine min-height der Höhe des Inhalts. Um dies zu verhindern, müssen wir den Mindesthöhenwert zurücksetzen. Schauen wir uns den HTML- und CSS-Code an:

HTML

 <div class="c-panel"> <h2 class="c-panel__title"><!-- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><!-- Content --></div> </div> </div>

CSS

 .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; }

Durch Hinzufügen eines Elements min-height: 0 wird der Eigenschaftswert zurückgesetzt und die erwartete Funktion wird ausgeführt
Demo



Gleichzeitige Verwendung von min-width und max-width


Manchmal gibt es Situationen, in denen wir ein Element mit einer minimalen Breite haben, gleichzeitig aber die maximale Breite nicht angegeben wird. Dies kann dazu führen, dass das Element zu breit wird, obwohl dieses Verhalten nicht beabsichtigt war. Betrachten Sie das folgende Beispiel:



Da die Breite in Pixeln definiert ist, gibt es keine Gewissheit, dass das oben Genannte für Mobilgeräte funktioniert. Um dieses Problem zu lösen, können Prozentsätze anstelle von Pixeln für die minimalen und maximalen Eigenschaften verwendet werden. Betrachten Sie das folgende Beispiel:

Ich habe das folgende CSS für die Bilder hinzugefügt:

CSS

 img { min-width: 35%; max-width: 70%; }





Seitencontainer


Eines der nützlichsten Szenarien für die Verwendung der Eigenschaft max-width ist das Umbrechen der Seite (oder des Containers). Indem Sie die Seite auf die maximale Breite einstellen, können wir sicher sein, dass Benutzer den Inhalt bequem anzeigen und lesen können



Unten sehen Sie ein Beispiel für eine zentrierte Hülle, die links und rechts padding

CSS

 .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; }

Maximale Breite und Maßeinheit "ch"




Die Maßeinheit ch entspricht der Breite des Zeichens 0 (Null), das in der Schriftart des aktuellen Elements verwendet wird. Mit der Eigenschaft max-width können wir die Anzahl der Zeichen in einer Zeichenfolge anpassen. Gemäß diesem Artikel aus dem Smashing Magazine beträgt die empfohlene Zeilenlänge 45 bis 75 Zeichen.

Im vorherigen Beispiel mit einem Wrapper-Element könnten wir von der Verwendung dieses Symbols profitieren, da es sich um ein Artikelelement handelt

CSS

 .wrapper { max-width: 70ch; /* Other styles */ }

Animieren Sie ein Element mit unbekannter Höhe


Manchmal stehen wir vor dem Problem, ein Akkordeon oder ein mobiles Menü mit unbekannter Inhaltshöhe zu animieren. In diesem Fall ist die Verwendung von max-height möglicherweise eine gute Lösung.

Betrachten Sie das folgende Beispiel:



Wenn die Menütaste gedrückt wird, sollte das Menü selbst reibungslos von oben nach unten angezeigt werden. Ohne JavaScript ist dies nicht möglich, es sei denn, das Element hat eine feste Höhe (und dies wird nicht empfohlen). Dies ist jedoch mit maximaler Höhe möglich. Die Idee ist, dem Element eine sehr hohe Höhe hinzuzufügen, z. B. max-height: 20rem , die nicht erreicht wird. max-height: 20rem können wir die Animationsschritte von max-height: 0 auf max-height: 20rem

CSS

 .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; }

Klicken Sie auf einen Hamburger, um die Animation in Aktion zu sehen


Mindesthöhe für das Oberteil (Held)


Wie Sie sehen, mag ich es nicht, Elementen eine feste Höhe zu geben. Ich bin der Meinung, dass ich damit gegen das Konzept verstoße, dass Komponenten im Web flexibel sein sollten. Das Hinzufügen einer Mindesthöhe für den ersten Abschnitt der Website (den Abschnitt „Held“) ist in Situationen hilfreich, in denen sehr große Inhalte hinzugefügt werden (dies geschieht).

Betrachten Sie das folgende Beispiel, in dem wir einen „Helden“ -Abschnitt mit einer festen Höhe haben. Es sieht gut aus



Wenn der Inhalt jedoch wächst, läuft er über den Container und geht über den Abschnittsumbruch hinaus. Das ist schlecht.



Um dieses Problem im Voraus zu vermeiden, können wir anstelle von min-height hinzufügen. Wir tun genau das, zumindest um unser Gewissen zu klären. Auch wenn dies der Grund für eine eher seltsame Seitenanzeige sein mag, sollten solche Situationen meines Erachtens in erster Linie im Content Management System (CMS) vermieden werden. Danach ist das Problem behoben und die Seite sieht gut aus:



Das Problem des Überlaufens mit Inhalten besteht nicht nur darin, dass es größer als die feste Höhe des übergeordneten Elements sein kann. Dies kann auf eine Verringerung der Bildschirmgröße und auf eine Erhöhung der Höhe des Textinhalts aufgrund von Silbentrennung zurückzuführen sein:



Wenn Sie keine feste Höhe angeben, sondern diese mit min-height auf das Minimum beschränken, tritt das oben beschriebene Problem überhaupt nicht auf.

Modales Fenster


Für die modale Fensterkomponente müssen Sie sowohl die minimale als auch die maximale Breite angeben. Dies funktioniert daher auf Bildschirmen jeder Größe (von Mobilgeräten bis zu Desktops). Dies erinnert an einen interessanten Artikel über CSS-Tricks, in dem erklärt wird, was in diesem Fall zu tun ist.

1 Weg

 .c-modal__body { width: 600px; max-width: 100%; }

2 wege

 .c-modal__body { width: 100%; max-width: 600px; }

Was mich max-width: 600px , bevorzuge ich den zweiten Weg, da ich nur die max-width: 600px definieren muss max-width: 600px . Ein modales Fenster ist ein div Element, daher ist die Breite des übergeordneten Fensters bereits auf 100% festgelegt, oder?

Betrachten Sie das folgende Beispiel für ein modales Fenster. Beachten Sie, wie die Breite zu 100% der Breite des übergeordneten Elements wird, wenn im Ansichtsfenster nicht genügend freier Speicherplatz vorhanden ist




Mindesthöhe und klebrige Fußzeile


Wenn der Inhalt der Seite nicht groß genug ist, wird nicht erwartet, dass die Fußzeile unten bleibt. Schauen wir uns ein Beispiel an, das dies besser demonstriert:



Bitte beachten Sie, dass die Fußzeile nicht am unteren Rand des Browserfensters klebt. Dies liegt daran, dass die Höhe des Inhalts geringer ist als die Höhe des Browserfensters. Nach dem Lösen dieses Problems sollte die Seite folgendermaßen aussehen:



Zuerst habe ich das Körperelement zu einem flexiblen Container gemacht und dann auf eine Mindesthöhe von 100% des Ansichtsfensters festgelegt.

CSS

 body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; }

Ich empfehle diesen Artikel auf klebrigen Fußzeilen zu lesen.
Demo

Proportionale Elementgrößen und maximale Breite / Höhe


Um einen proportionalen Container zu erstellen, der sich je nach Größe des Ansichtsfensters skalieren lässt, wurde einmal ein Hack mit Hilfe von Padding dargestellt . Jetzt können wir ein ähnliches Verhalten simulieren, indem wir die Ansichtseinheiten und die maximale Breite / Höhe kombinieren.

Anhand von Materialien aus einem Artikel von Miriam Suzanne möchte ich erklären, wie das funktioniert.



Wir haben ein Bild mit den Abmessungen 644 x 1000 Pixel. Wir müssen Folgendes tun:

  • Seitenverhältnis: height / width (Höhe geteilt durch Breite)
  • Behälterbreite: kann fest oder dynamisch sein (100%)
  • Stellen Sie die height auf 100% der Breite des Ansichtsfensters multipliziert mit dem Seitenverhältnis ein
  • Stellen Sie die max-height gleich dem Seitenverhältnis von Behälterbreite und Seitenverhältnis ein
  • Stellen Sie die max-width gleich der Behälterbreite ein

CSS

 img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); }




HTML / Body mit einer Höhe von 100%


Was ist, wenn das Körperelement 100% der Höhe des Ansichtsfensters einnehmen soll? Dies ist eine häufige Frage sowohl in der gesamten Web-Community als auch auf der StackOverflow- Site .

Zuerst müssen Sie die height: 100% festlegen height: 100% für das html Element. Dies stellt sicher, dass das Wurzelelement 100% hoch ist. Fügen Sie dann die min-height für das body . Der Grund für die Verwendung von min-height ist, dass diese Eigenschaft es ermöglicht, die Höhe des body Elements dynamisch zu gestalten und die Größe des Inhalts anzupassen

CSS

 html { height: 100%; } body { min-height: 100%; }

Demo

Hinweise


Mindestbreite und Blockelemente


Manchmal vergessen wir, dass das Element, auf das min-width angewendet werden soll, block ist. Am Ende kann dies verwirrend sein und das Element nicht beeinflussen. Stellen Sie sicher, dass der Gegenstand nicht blockiert ist

CSS-Vergleichsfunktionen


Bei der Untersuchung der Hauptprobleme, mit denen Entwickler bei StackOverflow konfrontiert sind, bin ich auf diese Frage gestoßen, in der der Autor Folgendes fragt:
Kann man so etwas machen? max-width: calc(max(500px, 100% - 80px)) oder vielleicht ist dies max-width: max(500px, calc(100% - 80px)))
Das gewünschte Verhalten ist, dass die Breite des Elements nicht mehr als 500px beträgt. Wenn die Breite des Bereichs nicht ausreicht, um das Element aufzunehmen, sollte die Breite 100% – 80px .

Was die als Antwort auf die Frage veröffentlichte Lösung betrifft, habe ich versucht, sie anzuwenden, und sie funktioniert in Chrome 79 und Safari 13.0.3. Obwohl dies den Rahmen des Artikels sprengt, werde ich hier dennoch eine Lösung nennen:

CSS

 .yourselector { max-width: calc(100% - 80px); } /* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } }

Quellen und Materialien für weitere Studien


Source: https://habr.com/ru/post/de483634/

More articles:


All Articles