html - JQuery-mobile，左侧边栏/工具箱

Question

我在我的 jQuery 移动应用程序上创建侧边栏工具箱时遇到困难。

我想要这样的渲染:http://www.paultrifa.com/envato/themeforest/side/red/preview/带有固定的左侧导航栏。我在文档中看到页眉和页脚具有原生的“固定”功能，但找不到满足我需要的开箱即用的东西。

我已经使用网格系统(一个在 PIXEL 中具有固定大小的工具箱)和响应式的另一部分(页面内容)进行了测试，但它有很多问题!

我该如何构建我的代码？最好的方法是将边栏 HTML 代码放在页面容器之外，但我遇到了一些问题。

我尝试使用基本的 CSS:

.sidebar{
    display:inline-block;
    width:47px;
    float:left;
    height:100%;
    position:fixed;
    background-image:url(images/sidebar-bg.png);
}

它有效，但页面内容被裁剪了。我必须重新调整“页面”容器的宽度，但面板的大小以像素为单位，所以我还有另一个问题...

如果有人有一些提示，那就太好了!

编辑:

完整代码:

<div data-role="page" data-theme="a">

    <!-- header -->
    <div data-role="header">

    </div> <!-- /header -->

    <!-- content -->
    <div data-role="content">

        <div class="ui-grid-b my-breakpoint">
            <div class="ui-block-a">
                <div class="sidebar">   
                    <!-- SIDEBAR CONTENT -->
                </div>
            </div>
            <div class="ui-block-b">
                {% block body %}
                {% endblock %}
            </div>
        </div>

    </div> <!-- /content -->

    <!-- footer -->
    <div data-role="footer">

    </div><!-- /footer -->

</div><!-- /page -->

我的问题是工具栏位于页眉和页脚之间...

Answer 1

这是我制作的 fiddle :http://jsfiddle.net/ezanker/xTFRr/ .这是否符合您的要求？

在 pagebeforeshow 上，我将内容 div 调整为屏幕的高度:

$('#page1').on("pagebeforeshow", function(e){
    var viewport_height = $(window).height();
    var content = $('#contentDiv');
    var content_height = viewport_height - 5;
    content_height -= (content.outerHeight() - content.height());
    content.height(content_height);
});

在页面内容中，我有一个带有以下 CSS 的侧边栏 div 和 mainCont div:

.sidebar{
display:inline-block;
    position:absolute;
    top: 0; left: 0; bottom: 0;
width:47px;
background-color:#C34848;   
}
.mainCont{
    display:inline-block;
    position:absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin-left: 47px;
    overflow: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

绝对定位用于将侧边栏放置在左侧，然后mainCont div是绝对定位并启用滚动。