| | |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| | | <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
|
|---|
| | | <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
|
|---|
| | | <style>
|
|---|
| | | html {
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | height: 100%; /* Anmerkung 2 */
|
|---|
| | | }
|
|---|
| | | body {
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | height: 100%; /* Anmerkung 2 */
|
|---|
| | | min-height: 0; /* Anmerkung 1 */
|
|---|
| | | display: flex;
|
|---|
| | | flex-flow: column;
|
|---|
| | | }
|
|---|
| | | .inhalt {
|
|---|
| | | display: flex;
|
|---|
| | | flex-flow: row;
|
|---|
| | | height: 100%; /* Anmerkung 2 */
|
|---|
| | | min-height: 0; /* Anmerkung 1 */
|
|---|
| | | }
|
|---|
| | | .nord {
|
|---|
| | | background-color: lightgray;
|
|---|
| | | }
|
|---|
| | | .sued {
|
|---|
| | | background-color: lightgray;
|
|---|
| | | }
|
|---|
| | | .west {
|
|---|
| | | flex-grow: 0;
|
|---|
| | | flex-shrink: 0;
|
|---|
| | | flex-basis: 10em; |
|---|
| | | background-color: antiquewhite;
|
|---|
| | | }
|
|---|
| | | .ost {
|
|---|
| | | flex-grow: 0;
|
|---|
| | | flex-shrink: 0;
|
|---|
| | | flex-basis: 10em;
|
|---|
| | | background-color: antiquewhite;
|
|---|
| | | }
|
|---|
| | | .zentrum {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-flow: column;
|
|---|
| | | }
|
|---|
| | | .zentrum-bc {
|
|---|
| | | }
|
|---|
| | | .zentrum-liste {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | overflow: auto;
|
|---|
| | | -webkit-overflow-scrolling: touch;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | |
|
|---|
| | | |
|---|
| | | .lipsum {
|
|---|
| | | color: lightgrey;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | /*
|
|---|
| | | Anmerkungen:
|
|---|
| | | 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. |
|---|
| | | http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto |
|---|
| | | 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles |
|---|
| | | immer ueber das gesamte Browserfenster ausdehnt.
|
|---|
| | | */
|
|---|
| | | </style>
|
|---|
| | | <link rel="stylesheet" type="text/css" href="stile.css">
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <!-- Kopfzeile -->
|
|---|
