Hallo,
ich habe folgendes Grid Layout erstellt:
HTML
<html>
<head>
<style>
html, body {
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
}
.grid {
width: 90%;
height:99%;
margin: 1% auto 0;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 10% auto 5%;
grid-template-areas:
"logo menue"
"inhalt inhalt"
"footer footer"
}
.logo {
background-color:blue;
grid-area: logo;
}
.menue {
background-color:green;
grid-area: menue;
}
.inhalt {
background-color:white;
grid-area: inhalt;
}
.footer {
background-color:yellow;
grid-area: footer;
}
</style>
</head>
<body>
<div class="grid">
<div class="logo">Logo</div>
<div class="menue">Menue</div>
<div class="inhalt">Inhalt</div>
<div class="footer">Footer</div>
</div>
</body>
</html>Ich hätte gerne, dass die Website nicht ganz oben am Browserfenster klebt. Wenn ich die Website wie im Beispiel etwas nach unten schiebe geht das Layout leider über den Bildschirm hinaus und ein Scrollbalken erscheint. Wie fügt man korrekt oben einen Abstand ein? Gleichzeitig soll das Layout auch bei viel Inhalt (mit einem Scrollbalken) korrekt funktionieren. Danke!
