css - 无法在居中布局的选项卡面板内向下滚动到末尾

Question

我正在努力解决以下问题，任何提示将不胜感激。

在中心面板的 jQuery UI 布局中，我在其中放置了一个 jQuery UI 选项卡 这个选项卡我放了一些内容。内容占用的空间超过可用空间， 我只想在包含的 div 上有一个滚动条，而不是在 整个选项卡，也不在中央面板上。事实上，我希望选项卡标题始终可见。

我做了什么:

• 为 jQuery UI 布局中心面板设置 center__contentSelector 到选项卡小部件(这样我的页眉和页脚就可以正常显示了)
• 在布局中心面板和选项卡上设置overflow: hidden 小部件
• 在内容的 div 上设置 overflow: auto
• 为选项卡小部件和内容的 div 提供高度

最后的效果看起来不错，但是滚动条无法显示 最后的元素，无论我尝试过什么。滚动到极限是不可能的。

这是一个 fiddle ，展示了它的样子:http://jsfiddle.net/mguijarr/288yaz15/

有什么想法吗？

Answer 1

你的 div 的高度似乎每次都有额外的 80 像素，因为标签标题部分。只需从 100% 中减去这 80 个像素:

#tab_1 {
    height: calc(100% - 80px);
    background: #00ffff;
    overflow: auto;
}

Fixed Fiddle