CSS：邊欄100％顯示高度，沒有重疊的導航欄。 （個人導航高度）

Question

我想爲設置視圖構建特定的佈局。這是應該的樣子：

有一個固定導航欄上的左側和右側的內容可以是獨立滾動。左側的導航欄應始終填充除導航欄外的整個頁面。

我知道，我可以讓左側導航position:fixed並給它一個頂部導航高度的偏移量，但導航的高度動態更改爲。

那麼有什麼動態的解決方案嗎？

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>

這是鏈接到我的JSFiddle： 感謝您的幫助！

Answer 1

爲什麼不使用表格呢？

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

應用寬度和高度的身體，並應用固定尺寸的報頭，側邊欄和主要內容。

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>