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>