将内容拟合到窗口高度

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顶部。它将有一个30px的滚动条。

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

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