css - 试图在不拉伸(stretch)容器的情况下将 JScrollPane 高度设置为 100%？

Question

我有一个中间容器，它占据了屏幕上剩余的任何垂直空间。在其中，我放置了一个当前设置为 200px 的 Jquery 滚动条:

.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}

但是，如果我将 .scroll-pane 高度设置为 100%，它只会删除滚动条并拉伸(stretch)整个页面。

See JsFiddle here

我怎样才能阻止它？谢谢!

Answer 1

这是我对这个问题的解决方案(jsfiddle)。它使用这样的标记:

<div id="top">...</div>
<div id="wrapper">
    <div id="middle">...</div>
</div>
<div id="bottom">...</div>

top 和 bottom div 绝对位于顶部和底部，width 为 100%。包装器 div 具有 height: 100%、box-sizing: border-box 以及等于顶部高度的顶部和底部填充和底部的div，分别。这会导致它填充视口(viewport)，但在顶部和底部 div 下方有填充。 middle div 的高度为 100%，因此它填充了包装器的内容框(即，100% 减去顶部和底部的填充).它具有 position: relative，这让您可以在两个内部框上自由使用 height: 100%。

最后，middleleft 是绝对定位的，middleright 的左边距等于它的宽度，这导致它填充剩余的水平空间。