Div填充补充垂直空间 [英] Div to fill remaing vertical space

问题描述

我有一个复杂的HTML应用程序，所以不幸的是不能真正提供一个代码示例。我们正在尝试获取div（用红色突出显示）以填充剩余的垂直空间（见图片）。

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

此表可能包含大量数据，所以如果数据不适合在屏幕上，它需要自己的滚动条。

我们只是希望表格填充所有可用的水平和垂直空间。我们似乎不能使它工作。

我们创建了一个jsfiddle示例，以尽可能展示我们的布局。这可以在此处查看。我们只是想让这个div（在jsfiddle的div被称为tablewrap）占据所有剩余的空间。

代码（从jsfiddle）如下： / p>

html

 < div class =header>标头< / div> 
< div class =sidebar>这是侧栏< / div> 
< div class =tablewrapper> 
< div class =tableheader-controls-etc>< / div> 
< div class =tablewrap> table< / div> 
< / div> 
  

css

  .header {height：50px;背景：黑色;颜色：白色; } 
 .sidebar {height：100％;位置：固定; width 200px;背景：灰色颜色：白色; } 
 .tablewrapper {float：right;宽度：75％; border：1px solid; margin-top：30px; margin-right：30px;} 
 .tableheader-controls-etc {height：150px;背景：蓝色;颜色：白色; } 
 .tablewrap {height：200px; border：2px solid red; width：100％; overflow：auto;} 
  

如果任何人都能提供一个很好的解决方案。

感谢，
Phil

解决方案

诀窍是设置 position：absolute ，然后根据需要调整顶部，底部，左侧和右侧的属性。请参见小提琴和说明。

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

I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).

The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).

This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.

We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.

We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.

Code (from jsfiddle) is as follows:

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;}

If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.

Thanks, Phil

解决方案

The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.

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

这篇关于Div填充补充垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！