0

我正在开发一个网络应用程序，我想让它感觉像一个实际的应用程序，所以我想让实际的网站填充 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的错误。我将 abox-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/

我用这个小提琴的简化版本发布了我的最终解决方案作为下面的答案。

4

1 回答 1

0

这是我想出的解决方案，最终仅使用 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/

于 2013-10-14T17:19:14.217 回答