Question

我创建了一个包含三个表的页面。第二个表位于带overflow: auto的div内。

我的问题恰恰在这张表中。我需要整个页面的高度不超过100％ - 第一个表格应始终显示在页面顶部;
- 第三个表格应始终显示在页面底部;
- 第二张桌子的高度应根据剩余的空间而变化，以完成100％的浏览器。

有谁知道如何解决我的困境？

以下是代码演示：http://jsbin.com/omeRUtIr/7/edit?html,css,output

Answer 1

您需要做类似的事情：

#header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 50px;
}

#content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  overflow: auto;
  width: 100%;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50px;
}

您可以在此处查看结果：http://jsbin.com/omeRUtIr/13/edit

如果您希望每张桌子都有三分之一的高度，您也可以使用百分比（而不是固定高度）。你会得到这样的结果：http://jsbin.com/omeRUtIr/15/edit。

高度可变的Div

1 个答案: