• CSS Freaks da?

    Ich versuche gerade ein (unter normalen Umständen) unkompliziertes Design umzusetzen....



    Folgende Annahmen:
    Header und Funktional sind eigenständig, allerdings ist die Höhe nicht fix, sondern abhängig vom Device und der Auflösung. Das wird also als eigenständiger Bereich gesehen, geschenkt...



    Die Sidebar soll automatisch auf den Rest der verfügbaren Höhe gestrecht werden und eine rechte Linie zur Abgrenzung haben. Content soll auf die restliche Höhe abzgl. Footer gestreckt werden. Bei den gefundenen Tutorials/Snippets zu Flex war immer die Box nicht bis zum Ende der Seite gestreckt, was aber sein soll. Das ganze läuft im Gridsystem von Bootstrap 4. Nutze ich height:100% in der Sidebar, wir die Höhe der Sidebar am Browserfenster ausgerichtet, da stört dann der Header aus Bild 1 auch noch. Ich möchte nicht "wie früher" mit einer Hintergrundgrafik für die Seitenlinie arbeiten.
    Habe bzgl. CSS auch gerade einen Knoten im Kopf und wäre für einen Kick in die richtige Richtung dankbar.
    • ungetestet, aus dem Kopf:

      .footer {
      position: fixed;
      height: 50px;
      }

      .content {
      min-height: calc(100% - 50px);
      }

      .sidebar {
      min-height: 100%;
      }
    • In der Richtung sollte es gehen

      Also als Grundprinzip. Das lässt sich wahrscheinlich auch mit den Cols kombinieren.

      Show Plain Text
      1. <div class="container-fluid vh-100 d-flex flex-column p-0">
      2.     <div class="header">Header</div>
      3.     <div class="functions">Funktional</div>
      4.     <div class="mainwrapper d-flex flex-grow-1">
      5.         <div class="sidebar">Sidebar</div>
      6.         <div class="contentwrapper flex-grow-1 d-flex flex-column">
      7.             <div class="content flex-grow-1 container-fluid">
      8.                 <div class="row">
      9.                     <div class="col"><p>Inhalt Inhalt</p></div>
      10.                     <div class="col"><p>Spalte2</p></div>
      11.                 </div>
      12.             </div>
      13.             <div class="footer ">Fooooooter</div>
      14.         </div>
      15.     </div>
      16. </div>
      17.  
      18. .content {
      19.     overflow: auto;
      20. }