Hallo,
wie der Titel schon verrät möchte ich eine dynamische Seite erstellen. Das heißt, wenn ich zum Beispiel das Browserfenster verkleinere (ziehe es nach links bzw. rechts), dann möchte ich, dass sich die Box (Siehe Code) der neuen Größe anpasst.
ZitatAlles anzeigenHtml-Teil:
</html>
<head>
<title>Dynamische Seite</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<div id="box1"></div>
</body>
</html>
ZitatAlles anzeigenCss-Teil:
#box1 {
background-image: linear-gradient(0deg, #5C5C5B 0%, #A09C97 100%);
position: absolute;
top: 20%;
left: 20%;
bottom: 0%;
right: 0%;
width: 30vw;
height: 10vh;
}
Dies passiert in diesem Beispiel nur zur Hälfte. Man sieht, dass sich die Box der neuen Breite oder Höhe anpasst. Damit habe ich, wenn ich das Fenster nach links bzw. nach rechts ziehe, ein Quadrat und kein Rechteck mehr. Daher hätte ich gerne einen Vorschlag, wie die Box im Verhältnis zum Fenster gleich groß bleibt.
Vielen Dank schon einmal für alle Antworten
Mit freundlichen Grüßen TheCrazyMen