CSS: Sidebar 100% display height without overlapping navigation bar. (individual nav height)

Question

I want to build a specific layout for a settings view. This is how it should look like:

There is a fixed navigation bar on the left side and the content on the right can be scrolled independently . The navigation bar on the left should always fill the complete page except the navigation bar.

I know, I could make the left navigation position:fixed and give it an offset of the top-navigation height, but the height of the navigation changes dynamically .

So is there any dynamic solution?

 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> 

This is the link to my JSFiddle : Thanks for any help!

Answer 1

Why not use a table instead?

 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

Apply width and height to body, and apply fixed dimensions to the header, sidebar and main content.

 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>