Hallo zusammen,
ich versuche bisher vergeblich, div auf die maximale noch verfügbare Höhe zu bringen. Ich habe hier einen einfachen HTML-Code als Beispiel
HTML
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
padding:0;
margin: 0;
height:100%;
}
.container {
min-height: 100%;
height:auto !important;
height:100%;
margin:auto;
background-color: #c0c0c0;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
min-height:100%;
}
.flex-container > div {
order: 0;
flex: 1 1 auto;
align-self: auto;
border: 1px solid #ff0000;
height:auto !important;
}
.small {
max-width:40px;
}
</style>
</head>
<body>
<div class="container">
<div>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</div>
<div class="flex-container">
<div><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p></div>
<div class="small">2</div>
<div>3</div>
</div>
</div>
</body>
</html>
Alles anzeigen
Die drei div's im flex-container sollen bis an den unteren Rand des Browsers gehen, unabhängig vom Inhalt. Kann mir bitte jemand sagen, was ich da falsch mache?
Danke im voraus
Biker