javascript - CSS:侧边栏 100% 显示高度，不重叠导航栏。 (个人导航高度)

Question

我想为设置 View 构建一个特定的布局。它应该是这样的:

左侧有一个固定导航栏，右侧的内容可以是< strong>独立滚动。左侧的导航栏应始终填满整个页面，但导航栏除外。

我知道，我可以让左侧导航 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>