Boxen verschieben sich beim zoomen des Browserfensters - HTML, CSS
Hallo,
ich bin komplett neu im Gebiet HTML, CSS, scripten, usw. und hatte nur vor einigen Jahren mal eine Website versucht zu erstellen.
Nun habe ich mich wieder dran gesetzt, komme aber nicht weiter, da ich erstmal das Grundlegende fertig machen möchte und mich dann an die Gestaltung mache.
Wenn ich die Größe meines Browserfensters durch zoomen änder, verschieben sich alle Boxen usw.
Kann mir da jemand weiterhelfen? (Nehmt es mir nicht übel, wenn im Code größere Fehler drin sind, bin seit einem Tag erst weider dabei)
Und tut mir Leid, denn ich kann mir vorstellen, dass es genügend dieser Fragen hier im Forum gibt. Ich habe bisher nur 2 gesehen, mit welchen ich dann an der html herumprobiert habe, es aber nicht funktioniert hat.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Home</title>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
header {
flex:1;
background:blue;
}
main{
flex:10;
display:flex;
}
section {
flex:1;
background: red;
}
aside {
flex:4;
background: green;
}
footer {
flex:1;
background: orange;
}
</style>
</head>
<body>
<header>
header
</header>
<main>
<section>
section
</section>
<aside>
aside
</aside>
</main>
<footer>
frooter
</footer>
</body>
</html>