Dateiname

CSS-Layouten

Layout mit fixer Kopf, Navigation und Fusszeile

Titel: myLayouter - Elements & Styles -> Demo ansehen / Demo2 ansehen mit Navigation / Demo mit mobiler Navigation (unvollständig)

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
      <title>myLayouter - Elements & Styles</title>
      <style>

        * {
         margin: 0;
         padding: 0;
        }

        html, body {
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: yellow;
            margin: 0;
        }
        img       {display:block; margin:0; padding:0px; border:0;}

        a:active {outline: none;}
        a:focus   {-moz-outline-style: none;}

        html,
        body {
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }

        .page {
          min-height: 100%;
          background:     gray;
          overflow: hidden;
        }
        .header {
          padding-bottom: 2em;
          background:     yellow;
        }

        .content {
        position:     absolute;
        top: 2em;
        left: 0;
        height: 75%;
        min-height: 70%;
        bottom:       2.5em;
          padding-bottom: 0em;
          background:     white;
          overflow-y: scroll;
          overflow-x: hidden;
        }

        .footer {
        position:     absolute;
        bottom:       0px;
        width: 100%;
        min-width: 100%;
        height: 2em;
        min-height: 2.5em;
          margin-top: -2em;
          background:     green;
        }

      </style>
</head>
<body>
    <div class="page">
      <div class="header">
        Kopfzeile
      </div>
      <div class="content">
        Inhalt<hr />
        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.         Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird.        Dieser Text ist normalerweise unsichtbar, wird aber angezeigt, wenn die Ãœberschrift geklickt wird. Ende - Ende - Ende
      </div>
    </div>
    <div class="footer">
      Fusszeile
    </div>
</body>
</html>