Ausgabe machen Div volle Höhe des Fensters ⇐ HTML

[Anonymous]

Ich habe Stunden damit verbracht, dies herauszufinden. Ich versuche im Wesentlichen, eine Webseite zu erstellen, die sich bis zur Größe des Computerfensters erstreckt, wobei gleichzeitig alle Seiten gepolstert werden. In diesem Behälter habe ich ein paar andere Behälter, von denen eines (mit den Bildern) scrollen. Aus irgendeinem Grund kann ich nicht alles genau passen. Ich habe widerliche Farben verwendet, damit ich meine Behälter klar sehen kann. Mein Code ist wahrscheinlich ein Chaos, ich bin ein bisschen verrostet! < /P>
Vielen Dank für jede Hilfe im Voraus. Referenzbild < /p>

Code: Select all

body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
text-align: left;
padding: 40px;
}

main {
display: flex;
height: 100vh;
margin: 0;
flex-grow: 1;
background-color: #ccc;
border: 1px solid red;
text-align: left !important;
overflow: hidden;
}

.menu-box {
flex-basis: 60px;
text-align: left;
background-color: green;
padding: 30px;
min-width: 200px;
}
.menu-box2-container {
padding-top: 30px;
padding-bottom: 30px;
padding-right: 30px;
flex-shrink: 1;
box-sizing: border-box;
max-height: 100vh;
overflow: scroll;
}
.menu-box2 {
border: 1px solid yellow;
padding: 30px;
overflow: scroll;
max-height: 100vh;
box-sizing: border-box;
overflow: scroll;
}
.menu-box2 img {
max-width: 80%;
padding: 10px;
border: 1px solid #e6e6e6;
}< /code>


test test test test labllbal testing hahahah hehehe



test test test test labllbal testing hahahah hehehe

[img]https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1200-80.jpg[/img]

test

[img]https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1200-80.jpg[/img]

Test

[img]https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1200-80.jpg[/img]

Test