javascript - 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，然后根据需要调整top、bottom、left和right属性。参见 fiddle和 explanation .

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