Div填充剩余的垂直空间

Question

我有一个复杂的HTML应用程序，所以遗憾的是无法真正提供代码示例。我们试图让div（以红色突出显示）填充剩余的垂直空间（见图）。

应用程序包含一个标题（黑色），左侧的侧边栏可以被解除或调整大小（注意：水平组件正确调整大小）。侧边栏右侧是另一个div（mainDiv）。 mainDiv在控件的顶部包含一个div，在它下面包含一个div用于数据表（以红色突出显示）。

此表可能包含大量数据，因此如果数据不适合屏幕，则需要自己的滚动条。

我们只希望表格填充所有可用的水平和垂直空间。我们似乎无法使其发挥作用。

我们已经创建了一个jsfiddle示例来尽可能地展示我们的布局。这可以看作here。我们只想要这个div（在jsfiddle中div被称为“tablewrap”）占用所有剩余的空间。

代码（来自jsfiddle）如下：

HTML

<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
    <div class="tableheader-controls-etc"></div>
    <div class="tablewrap">table</div>
 </div> 

CSS

.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}

如果有人能提供一个很棒的解决方案。我们更喜欢CSS但可以处理Javascript。

谢谢， 菲尔

Answer 1

诀窍是设置position: absolute，然后根据需要调整顶部，底部，左侧和右侧属性。请参阅fiddle和explanation。

.tablewrap {
  position: absolute;
  top: 240px;
  bottom: 0;
  left: 150px;
  right: 40px;
  height: auto;
  width: auto;
  ...
}

Answer 2

你可以试试这个：

.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}

（根据需要设置最小高度）

Answer 3

嗯，是时候说出你可能不想听到的内容了：你不能用CSS做到这一点。

您必须使用javascript才能找到两件事：

1. 视口高度
2. 控制div高度

一旦知道了这两个高度，就可以将桌面高度设置为：

finalHeight = viewport - (controls+header+footer)

如果页眉和页脚也有动态高度，请使用javascript计算它们。

您还需要在窗口调整大小时重新计算此高度。当然，如果禁用javascript，您的布局将无效。