| commit | author | age | ||
| d3a2d9 | 1 | html, body { |
| U | 2 | margin: 0; |
| 3 | padding: 0; | |
| 4 | height: 100%; /* Anmerkung 2 */ | |
| 5 | font-size: larger; | |
| 6 | } | |
| 7 | body { | |
| 8 | min-height: 0; /* Anmerkung 1 */ | |
| 9 | display: flex; | |
| 10 | flex-flow: column; | |
| 11 | } | |
| 12 | .inhalt { | |
| 13 | display: flex; | |
| 14 | flex-flow: row; | |
| 15 | height: 100%; /* Anmerkung 2 */ | |
| 16 | min-height: 0; /* Anmerkung 1 */ | |
| 17 | } | |
| 18 | .nord { | |
| 19 | background-color: lightgray; | |
| 20 | } | |
| 21 | .sued { | |
| 22 | background-color: lightgray; | |
| 23 | } | |
| 24 | .west { | |
| 25 | flex-grow: 0; | |
| 26 | flex-shrink: 0; | |
| 27 | flex-basis: 10em; | |
| 28 | background-color: antiquewhite; | |
| 29 | } | |
| 30 | .ost { | |
| 31 | flex-grow: 0; | |
| 32 | flex-shrink: 0; | |
| 33 | flex-basis: 10em; | |
| 34 | background-color: antiquewhite; | |
| 35 | } | |
| 36 | .zentrum { | |
| 37 | width: 100%; | |
| 38 | height: 100%; | |
| 39 | overflow: auto; | |
| 40 | -webkit-overflow-scrolling: touch; | |
| 41 | } | |
| 42 | ||
| 43 | /* | |
| 44 | Anmerkungen: | |
| 45 | 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. | |
| 46 | http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto | |
| 47 | 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles | |
| 48 | immer ueber das gesamte Browserfenster ausdehnt. | |
| 49 | */ | |
