CSS: Seitenleiste 100% Anzeigehöhe ohne überlappende Navigationsleiste. (individuelle Nav Höhe)

Question

Ich möchte ein bestimmtes Layout für eine Einstellungsansicht erstellen. Dies ist, wie es aussehen soll:

Es ist ein Fest Navigation bar auf die Seite links und der Inhalt auf dem rechts kann unabhängig gescrollt werden. Die Navigationsleiste auf der linken Seite sollte immer die komplette Seite mit Ausnahme der Navigationsleiste ausfüllen.

Ich weiß, ich könnte die linke Navigation position:fixed machen und es zu einem der Top-Navigationshöhenversatz geben, aber die Höhe der Navigation ändert sich dynamisch.

Gibt es also eine dynamische Lösung?

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
} 
 

 
.lorem { 
 
    background-color: Gainsboro; 
 
    height: 100px; 
 
    margin: 10px; 
 
} 
 

 
#nav-top { 
 
    height: 100px; 
 
    Background-color: SeaGreen; 
 
} 
 

 
#nav-sub { 
 
    height: 30px; 
 
    Background-color: YellowGreen; 
 
} 
 

 
.content { 
 
    position: relative; 
 
} 
 

 
.left-nav { 
 
    position: fixed; 
 
    background-color: Teal; 
 
    top: 0; 
 
    margin: 0; 
 
    bottom: 0; 
 
    z-index: 2; 
 
}

<div id="nav-top"> Navigation</div> 
 
<div id="nav-sub"> Subnavigation</div> 
 
<ul class="left-nav"> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
</ul> 
 

 
<div class="content"> 
 
    <h1>Scrollable Content</h1> 
 
    <div class="lorem"> 
 
    </div> 
 
    <div class="lorem"> 
 
    </div> 
 
    <div class="lorem"> 
 
    </div> 
 
    <div class="lorem"> 
 
    </div> 
 
    <div class="lorem"> 
 
    </div> 
 
</div>

Dies ist der Link zu meinem JSFiddle: Vielen Dank für jede Hilfe!

Answer 1

Warum nicht stattdessen eine Tabelle verwenden?

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
h1{ 
 
    margin:0; 
 
} 
 

 
.lorem{ 
 
    background-color: Gainsboro; 
 
    height: 100px; 
 
    margin:10px; 
 
} 
 

 
#nav-top{ 
 
    height:100px; 
 
    Background-color:SeaGreen; 
 
} 
 
#nav-sub{ 
 
    height:30px; 
 
    Background-color:YellowGreen; 
 
} 
 

 
.content{ 
 
    width:100%; 
 
} 
 

 
.left-nav { 
 
    background-color: Teal; 
 
    vertical-align: top; 
 
}

<div id="nav-top"> Navigation</div> 
 
<div id="nav-sub"> Subnavigation</div> 
 

 
<table><tr class="left-nav"> 
 
<td> 
 
    <ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    </ul> 
 
</td> 
 
<td class="content"> 
 
    <div > 
 
     <h1>Scrollable Content</h1> 
 
     <div class="lorem"> 
 
     </div> 
 
      <div class="lorem"> 
 
     </div> 
 
      <div class="lorem"> 
 
     </div> 
 
      <div class="lorem"> 
 
     </div> 
 
      <div class="lorem"> 
 
     </div> 
 
    </div> 
 
</td> 
 
</tr> 
 
</table>

Answer 2

Anwenden Breite und Höhe auf Körper und festen Abmessungen gelten für den Header, Seitenleiste und Hauptinhalt.

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    overflow: hidden; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    min-height: 100px; 
 
    background-color: rgb(103, 194, 33); 
 
    display: flex; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    padding: 5%; 
 
} 
 

 
aside { 
 
    width: 20%; 
 
    max-height: calc(100% - 100px); 
 
    background-color: rgb(159, 159, 159); 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
li { 
 
    padding: 5%; 
 
} 
 

 
main { 
 
    width: 80%; 
 
    max-height: calc(100% - 100px); 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    box-sizing: border-box; 
 
    padding: 2.5%; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 25%; 
 
    background-color: rgb(223, 223, 223); 
 
    margin-bottom: 2.5%; 
 
}

<header>Brand</header> 
 
<aside> 
 
    <ul> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    </ul> 
 
</aside> 
 
<main> 
 
    <h1>Some Content</h1> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
    <div class="container"></div> 
 
</main>