Testen Sie Ihre Fähigkeiten: Overflow
Dieser Fähigkeitstest soll beurteilen, ob Sie Overflow in CSS und dessen Verwaltung verstehen.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe überläuft der Inhalt die Box, da sie eine feste Höhe hat. Behalten Sie die Höhe bei, aber sorgen Sie dafür, dass die Box nur dann Scrollbars hat, wenn genug Text vorhanden ist, um einen Overflow zu verursachen. Testen Sie, indem Sie etwas Text aus dem HTML entfernen: Wenn nur eine kleine Menge Text vorhanden ist, die nicht überläuft, sollte kein Scrollbar erscheinen.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzustellen:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe befindet sich ein Bild in der Box, das größer ist als die Dimensionen der Box und daher sichtbar überläuft. Ändern Sie es so, dass jedes Bild außerhalb der Box versteckt wird.
Ihr Endergebnis sollte wie das Bild unten aussehen:
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzustellen:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.