可变高度下的可滚动容器

Question

我试图布置一些CSS来构建一个看起来像一个相当典型的桌面应用类型布局的网站：

我几乎已经完成了所有工作，但是我在让可滚动面板粘在视口底部并使用滚动条显示而不是溢出页面时遇到问题。

我到目前为止的HTML和CSS是：

HTML

<nav></nav> <!-- Fixed height header -->
<aside></aside> <!-- Fixed height/width sidebar -->
<main><!-- Right content area container -->
    <div class="top"></div> <!-- Right side top adjustable height panel -->
    <div class="toolbar"></div> <!-- Fixed height toolbar -->
    <div class="content"></div> <!-- Scrollable panel -->
</main>

CSS

nav {
  width 100%;
  height: 40px;
}

aside {
  width: 260px;
  position: absolute;
  top: 40px;
  bottom: 0;
}

main {
  position: absolute;
  left: 260px;
  top: 40px;
  bottom: 0;
  right: 0;
}

.top {
  position: relative;
  right: 0;
  left: 0;
  min-height: 200px;
}

.toolbar {
  height: 30px;
  position: relative;
  right: 0;
  left: 0;
}

.content {
  position: relative;
  top: 0;
  bottom: 0;
  overflow: auto;
  right: 0;
} 

使用上面的CSS，可滚动面板不会停留在视口的范围内并显示滚动条。我希望找到一个没有javascript的解决方案（它们都生活在一个有角度的应用程序中，所以我想避免依赖javascript进行定位，如果我可以避免它的话）

Answer 1

您可以使用calc轻松创建此布局。

http://jsfiddle.net/q18k57zr/

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #333;
}

aside {
  position: fixed;
  top: 40px;
  left: 0;
  width: 200px;
  height: 100%;
  background: #666;
}

main {
  position: relative;
  top: 40px;
  width: calc(100% - 200px);
  height: calc(100% - 40px);
  margin: 0 0 0 200px;
  background: #999;
}

.section-top {
  height: 100px;
}

.section-toolbar {
  height: 40px;
  background: #fff;
}

.section-scrollable {
  height: calc(100% - 140px);
  overflow-y: scroll;
  background: #ccc;
  padding: 20px;
}

这显然只是一些演示代码。不打算使用，但你会得到这个想法。那里有一些神奇的数字，但这可以很容易地设置为Sass / LESS的变量，只需要做一些数学运算。