Question

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

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

Layout example http://i41.tinypic.com/jq50qr.png

我希望有一些简单的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似乎忽略了溢出：auto我设置了滚动条，导致内容被切断。知道如何让它在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/

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

1 个答案: