用 Javascript/Jquery 填充剩余高度（100% 高度 Web 应用程序）

Question

我正在开发一个网络应用程序，我想让它感觉像一个实际的应用程序，所以我想让实际的网站填充 100% 的浏览器高度，并且只有特定的窗格是可滚动的有些地方总是可见的。

下面是一组潜在窗格的模型。列中将有窗格，其高度由它们的内容决定，然后是一个可滚动的窗格，该窗格应填充剩余空间。有些列可能有两个可滚动的 div（但这并不重要，我可以有一个具有定义高度的列）。固定高度的 div 可以使用百分比或像素来确定高度。

我希望有一些简单的 Jquery 我可以使用它来使可滚动窗格填充剩余的高度，只需添加一个“fillheight”类或类似的简单的东西。

我已经看到一些 CSS 解决方案，但它们需要页眉和页脚，或者它们需要在列中的所有窗格中使用大量特定样式，这使得很难在不同页面上轻松创建不同的窗格。就我而言，我希望可滚动窗格位于任何地方。可能在顶部、中间或底部，也可能嵌套。

我看过脚本Jquery Layout 并喜欢它的潜力，但是它对于我的需要来说有点过分了。调整大小和折叠会很好，但我真的不需要。此外，该脚本似乎不再受支持，并且为了在商业产品上使用它，我宁愿不依赖旧的、不受支持的脚本。最好我宁愿有一个简单的脚本，而不是一个完整的插件/框架。

感谢任何帮助！如果我找到解决方案，我会更新这篇文章。

更新 1：

我想我已经找到了一个解决方案，而且毕竟只使用 CSS。它基于链接到@crafter 的解决方案。我创建了一个 jsfiddle，它显示了我上面描述的所有用例。

http://jsfiddle.net/8BHM6/4/

让它工作的部分关键是在静态窗格中使用以下内容：

.static-pane {
    position:absolute;
    width:100%;
    height: 15%;
    top:0;
}

填充剩余高度的窗格如下：

.fill {
    width:100%;
    height:auto;
    overflow:auto;
    top:15%;
    bottom:0;
}

（请注意涉及更多代码，请参阅 jsfiddle）

它似乎在 Chrome 和 IE 10 中工作得很好，但 Firefox 似乎忽略了溢出：我已经设置为提供滚动条，这会导致内容被切断。知道如何让它在 Firefox 上运行吗？

更新 2：

我修复了 Firefox 错误。我将box-sizing:brder-box 应用于所有元素，但显然这不适用于firefox，因此我也必须对它们应用-moz-box-sizing:border-box 的浏览器特定版本。这解决了 Firefox 的所有问题。

更新小提琴：http://jsfiddle.net/8BHM6/6/

更新 3：

发现 Safari 不显示可滚动 div 的滚动条的问题，使用此代码修复了该问题，该代码设置了滚动条样式，强制它们显示。请注意，它也为 chrome 上的滚动条设置样式，这实际上是一个不错的外观。

.fill::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}
.fill::-webkit-scrollbar-track {
    background-color: rgba(0,0,0, .3);
    border-radius: 0px;
}
.fill::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: rgba(255,255,255, .4);
}

我仍然有 IE9 的问题，但当滚动条出现时，它们向左太远了。仍在调查中，但 Chrome、Safari、Firefox 和 Opera 现在都在工作。

更新小提琴：http://jsfiddle.net/8BHM6/7/

更新 4：

修复了 IE9 错误。 IE9 在与溢出结合时似乎不喜欢box-sizing:border-box，所以我添加了一个box-sizing:content-box\9; 的IE9 hack，它起作用了。

更新小提琴：http://jsfiddle.net/8BHM6/8/

我在下面发布了我的最终解决方案，并附上了这个小提琴的简化版本。

Answer 1

这是我想出的解决方案，最终仅使用 CSS 就相当简单，尽管如果使用 javascript 解决方案可以让它变得更简单，哦，好吧。

为了简化这一点，基本的代码如下：

CSS：

body, html {
    height:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
    box-sizing:content-box\9; /* Fix for IE9 sizing */
    -moz-box-sizing:border-box; /* Fix for firefox */
}
.column {
    position:absolute;
    width:100%;
    min-height:100%;
    height:auto;
    overflow:hidden;
}
.pane {
    position:absolute;
    width:100%;
    overflow:hidden;
}
.fill {
    height:auto;
    overflow:auto;
}
.top {
    background:pink;
    height: 20%;
    top:0;
}
.middle {
    background:red;
    top:20%;
    bottom:50px;
}
.bottom {
    background:orange;
    height: 50px;
    bottom:0;
}

/* Fix for Safari scrollbars (also styles Chrome scrollbars) */
    .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
    .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;}
    .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);}

HTML：

<div class="column">
    <div class="pane top">Top</div>
    <div class="pane middle fill">Middle</div>
    <div class="pane bottom">Bottom</div>
</div>

JSFiddle：http://jsfiddle.net/xY3jr/3/

对于这个的复杂版本，你可以查看这个 JSFiddle：http://jsfiddle.net/8BHM6/8/