0

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

应用

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

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

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

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

谢谢，菲尔

4

3 回答 3

2

诀窍是设置position: absolute，然后根据需要调整顶部、底部、左侧和右侧属性。见小提琴和解释。

.tablewrap {
  position: absolute;
  top: 240px;
  bottom: 0;
  left: 150px;
  right: 40px;
  height: auto;
  width: auto;
  ...
}
于 2013-04-08T09:37:25.723 回答
0

你可以试试这个：

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

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

于 2013-04-08T09:26:14.130 回答
0

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

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

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

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

finalHeight = viewport - (controls+header+footer)

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

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

于 2013-04-08T09:53:25.510 回答