使内容适合窗口高度

Question

我有这个 CSS：

html,body {margin:0;}

#nav {
  height:30px;
  background:#FFF;
  background:red;
}

#content {
  position:absolute;
  left:0;
  bottom:0;
  top:30px;
  right:0;
  height:100%;
  background:green;
}

我试图在顶部有一个导航栏（红色部分），下面的内容区域（绿色部分）应该刚好填满剩余空间，但正如您所见，高度大于创建的窗口高度一个卷轴。我该如何克服这个问题？

jsFiddle：http://jsfiddle.net/2dcr5yty/5/

Answer 1

不要使用height 100%。使用bottom: 0。因为它将是容器的 100% 高度。这是身体，所以100％的身高意味着。如果位置顶部 = 0，则覆盖整个文档。因为你有 30px 顶部。它将有一个 30 像素的滚动条。

示例：http://jsfiddle.net/2dcr5yty/6/

#content {
  position:absolute;
  left:0;
  bottom:0;
  top:30px;
  right:0;
  bottom:0;
  background:green;
}