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>
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