html - 3 节布局

Question

我想用基本的 3 部分布局来布局网页。顶部有一个固定的静态顶部导航栏。在它的正下方是两个部分，它们将占据页面的整个宽度和剩余高度。有一个固定的侧边栏(不可折叠)，它的右侧是将显示内容的主 Pane (阅读仪表板)。

目前，我只是对侧边栏和主 Pane 的百分比宽度进行硬编码。将最小/最大宽度应用于侧边栏会破坏布局。如果需要，我可以将其设置为固定宽度。

如果我分配侧边栏最小/最大/固定宽度，如何让主 Pane 部分占用侧边栏未使用的剩余宽度？

html {
  height: 100%;
}
body {
  padding: 0px;
  height: 100%;
}
div {
  text-align: center;
  color: white;
}
.top-nav {
  background-color: green;
  height: 65px;
  margin: 0px;
  padding: 0px;
}
.content {
  height: 100%;
  width: 100%;
}
.side-bar {
  background-color: blue;
  width: 10%;
  height: 100%;
  float: left;
}
.main-pane {
  background-color: red;
  height: 100%;
  width: 90%;
  float: right;
}

<div class="top-nav">
  Fixed Top Navigation
</div>
<div class="content">
  <div class="side-bar">
    Fixed Side Bar
  </div>
  <div class="main-pane">
    Main Pane
  </div>
</div>

Here is the above code in a pen.

编辑:如果有更多首选解决方案，我愿意接受以完全不同的方式解决此问题的其他解决方案，例如 flex 盒子。

Answer 1

我将侧边栏更改为固定大小，并将定位更改为绝对。主要内容面板我用填充补偿了侧边栏的宽度。请检查更新的笔。 http://codepen.io/anon/pen/ENGbva?editors=1100

<div class="top-nav">
  Fixed Top Navigation
</div>
<div class="content">
 <div class="side-bar">
   Fixed Side Bar
 </div>
 <div class="main-pane">
   Main Pane
 </div>
</div>

html{
  height: 100%;
}
body {
  padding: 0px;
  height: 100%;
}
div{
  //text-align: center;
  color: white;
}
.top-nav {
  background-color: green;
  height: 65px;
  margin: 0px;
  padding: 0px;
}
.content {
  height: 100%;
  width: 100%;
  position: relative;
}
.side-bar {
  background-color: blue;
  width: 200px;
  height: 100%;
  float: left;
  position: absolute;
  left: 0;
  z-index: 999;
}
.main-pane {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
  padding-left: 200px;
}