commit | author | age
|
d3a2d9
|
1 |
html, body { |
U |
2 |
margin: 0; |
|
3 |
padding: 0; |
|
4 |
height: 100%; /* Anmerkung 2 */ |
|
5 |
font-size: larger; |
403f2f
|
6 |
font-family: 'Roboto Condensed'; |
d3a2d9
|
7 |
} |
U |
8 |
body { |
|
9 |
min-height: 0; /* Anmerkung 1 */ |
|
10 |
display: flex; |
|
11 |
flex-flow: column; |
|
12 |
} |
|
13 |
.inhalt { |
|
14 |
display: flex; |
|
15 |
flex-flow: row; |
|
16 |
height: 100%; /* Anmerkung 2 */ |
|
17 |
min-height: 0; /* Anmerkung 1 */ |
403f2f
|
18 |
background-color: #ededed; |
d3a2d9
|
19 |
} |
U |
20 |
.nord { |
df8c52
|
21 |
background-color: black; |
U |
22 |
display: flex; |
|
23 |
flex-flow: row; |
|
24 |
height: 2.5em; |
|
25 |
align-items: center; |
d3a2d9
|
26 |
} |
U |
27 |
.sued { |
|
28 |
background-color: lightgray; |
|
29 |
} |
|
30 |
.west { |
|
31 |
flex-grow: 0; |
|
32 |
flex-shrink: 0; |
df8c52
|
33 |
flex-basis: 4em; |
U |
34 |
background-color: white; |
|
35 |
transition: all 0.3s ease-in; |
|
36 |
overflow: hidden; |
|
37 |
white-space: nowrap; |
d3a2d9
|
38 |
} |
U |
39 |
.ost { |
|
40 |
flex-grow: 0; |
|
41 |
flex-shrink: 0; |
403f2f
|
42 |
flex-basis: 6em; |
d3a2d9
|
43 |
background-color: antiquewhite; |
U |
44 |
} |
|
45 |
.zentrum { |
|
46 |
width: 100%; |
|
47 |
height: 100%; |
|
48 |
overflow: auto; |
|
49 |
-webkit-overflow-scrolling: touch; |
403f2f
|
50 |
padding: 0.5em; |
d3a2d9
|
51 |
} |
U |
52 |
|
|
53 |
/* |
|
54 |
Anmerkungen: |
|
55 |
1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. |
|
56 |
http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto |
|
57 |
2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles |
|
58 |
immer ueber das gesamte Browserfenster ausdehnt. |
|
59 |
*/ |
df8c52
|
60 |
|
U |
61 |
.app-titel { |
403f2f
|
62 |
margin-left: 0.6em; |
df8c52
|
63 |
color: white; |
U |
64 |
} |