Div来填充剩下的垂直空间

我有一个复杂的HTML应用程序，所以很遗憾不能真正提供代码示例。我们试图让div（红色突出显示）填充剩余的垂直空间（请参见图片）。Div来填充剩下的垂直空间

Application

该应用程序包含一个报头（在黑色）的，可以在其上驳回或调整左侧栏（注意：水平分量正确调整大小）。在侧边栏的右侧是另一个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。

感谢，菲尔

来源

2013-04-08 Phil

给出tablewrap和tablewrapper高度占总高度的百分比。同时，为它们添加一个最小高度属性，以确保其高度不会低于某个值。 – 2013-04-08 09:26:24

根据您的身高添加最小高度.tablewrap {height：200px;边框：2px纯红色;宽度：100％;溢出：自动;最小高度：240px;} http://jsfiddle.net/8pPPm/3/ – defau1t 2013-04-08 09:29:05

关键是要设置position: absolute，然后调整顶部，底部，左侧和右侧属性。见fiddle和explanation。

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

来源

2013-04-08 09:37:25 mb21

如果蓝色div具有动态高度，则不起作用。是的，我知道示例小提琴的固定高度为150px，但在截图中它似乎不同。 – TheBronx 2013-04-08 09:48:26

非常感谢！您的解决方案使我们走上了正确的轨道，现在我们的应用程序中有一个调整大小的表格。谢谢！ – Phil 2013-04-08 09:55:24

看看这段代码：http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/记住这个解决方案将失败，如果你有动态股利。也就是说，没有固定高度的div。 – TheBronx 2013-04-08 09:58:53

你可以试试这个：

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

（只要你想设置的最小高度）

来源

2013-04-08 09:26:14

那么，现在是时候说出你可能不想听到的嘿嘿：你不能用CSS做到这一点。

你必须使用JavaScript，以便找到了两件事情：

视口高度
控制DIV高度

一旦你知道那两个高度，你可以设置你的工作台高度到：

finalHeight = viewport - (controls+header+footer)

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

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

来源

2013-04-08 09:53:25 TheBronx

Div来填充剩下的垂直空间

回答

相关问题