div填充剩余的垂直空间答案

【问题标题】：Div to fill remaing vertical spacediv填充剩余的垂直空间
【发布时间】：2013-04-08 17:53:25
【问题描述】：

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

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

此表可能包含大量数据，因此如果数据无法在屏幕上显示，它需要自己的滚动条。

我们只想让表格填满所有可用的水平和垂直空间。我们似乎无法让它发挥作用。

我们创建了一个 jsfiddle 示例来尽可能地展示我们的布局。这可以看到here。我们只希望这个 div（在 jsfiddle 中称为“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。

谢谢，菲尔

【问题讨论】：

给出 tablewrap 和 tablewrapper 高度占总高度的百分比。同时，为它们添加一个 min-height 属性，以确保其高度不会低于某个值。
根据你的身高添加最小高度 .tablewrap { height: 200px;边框：2px 纯红色；宽度：100%；溢出：自动；最小高度：240px；} jsfiddle.net/8pPPm/3

标签： javascript css html

【解决方案1】：

诀窍是设置position: absolute，然后根据需要调整top、bottom、left、right属性。请参阅fiddle 和explanation。

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

【讨论】：

如果蓝色 div 具有动态高度，那将无法正常工作。是的，我知道示例小提琴的高度固定为 150 像素，但在屏幕截图上似乎有所不同。
非常感谢！您的解决方案让我们走上了正轨，现在我们的应用程序中有一个调整大小的表。谢谢！
看看这段代码：blog.stevensanderson.com/2011/10/05/… 并记住，如果你有动态 div，这个解决方案将会失败。也就是说，没有固定高度的 div。

【解决方案2】：

你可以试试这个：

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

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

【讨论】：

【解决方案3】：

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

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

视口高度
控制 div 高度

知道这两个高度后，您可以将桌子高度设置为：

finalHeight = viewport - (controls+header+footer)

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

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

【讨论】：