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