如果JQuery Mobile的内容溢出，如何通过滚动使面板高度固定 [英] How to keep panel height fixed with scroll if content overflow for JQuery Mobile

问题描述

我的页面具有固定的页眉和固定的页脚.内容的高度也固定为窗口的高度.

I have a page with fixed header and a fixed footer. The height of the content is also fixed to the height of the window.

文档具有一个面板，其内容可能会比窗口/内容的高度更长.发生这种情况时，文档的高度将被更改.但是我需要在没有滚动条的情况下保持文档的高度固定.面板应该显示滚动条.

The document has a panel whose content may grow longer than the height of window/content. When that happens the height of the document gets changed. But I need to keep the height of the document fixed without scrollbars. The panel should get the scrollbar instead.

示例: http://jsfiddle.net/moizhb/GSSD3/

这是实例化面板的方式:

Here is how panel is instantiated:

<div data-role="panel" id="navpanel" data-theme="a" data-display="overlay"></div>

我希望在这里找到任何指示.

I'd appreciate any directions here.

谢谢！

推荐答案

您正在这里更新小提琴: http://jsfiddle. net/ezanker/GSSD3/1/

Here is you fiddle updated: http://jsfiddle.net/ezanker/GSSD3/1/

只需添加一些CSS即可绝对定位和调整面板内部div的大小并允许滚动:

Just added some CSS to absolutely position and size the panel's inner div and to allow scrolling:

.ui-panel .ui-panel-inner {
    overflow: auto;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;  
    -webkit-overflow-scrolling: touch;
}

您需要针对您支持的设备进行测试，因为我不确定它是否可以在所有设备上正常工作...

You will need to test this for the devices you are supporting as I am not sure if it will work on all of them...

这篇关于如果JQuery Mobile的内容溢出，如何通过滚动使面板高度固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！