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 { |
df8c52
|
19 |
background-color: black; |
U |
20 |
display: flex; |
|
21 |
flex-flow: row; |
|
22 |
height: 2.5em; |
|
23 |
align-items: center; |
d3a2d9
|
24 |
} |
U |
25 |
.sued { |
|
26 |
background-color: lightgray; |
|
27 |
} |
|
28 |
.west { |
|
29 |
flex-grow: 0; |
|
30 |
flex-shrink: 0; |
df8c52
|
31 |
flex-basis: 4em; |
U |
32 |
background-color: white; |
|
33 |
transition: all 0.3s ease-in; |
|
34 |
overflow: hidden; |
|
35 |
white-space: nowrap; |
d3a2d9
|
36 |
} |
U |
37 |
.ost { |
|
38 |
flex-grow: 0; |
|
39 |
flex-shrink: 0; |
|
40 |
flex-basis: 10em; |
|
41 |
background-color: antiquewhite; |
|
42 |
} |
|
43 |
.zentrum { |
|
44 |
width: 100%; |
|
45 |
height: 100%; |
|
46 |
overflow: auto; |
|
47 |
-webkit-overflow-scrolling: touch; |
|
48 |
} |
|
49 |
|
|
50 |
/* |
|
51 |
Anmerkungen: |
|
52 |
1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. |
|
53 |
http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto |
|
54 |
2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles |
|
55 |
immer ueber das gesamte Browserfenster ausdehnt. |
|
56 |
*/ |
df8c52
|
57 |
|
U |
58 |
.app-titel { |
|
59 |
margin-left: 2em; |
|
60 |
color: white; |
|
61 |
} |