Html JQuery mobile，左侧边栏/工具箱

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

我想要这样的渲染：使用固定的左导航条。 我在文档中看到页眉和页脚具有本机的“固定”功能，但无法找到符合我需要的现成功能

我已经用网格系统（一个是固定大小的像素-用于工具箱）和另一个部分（页面内容）进行了测试，但是它有很多缺陷

我必须如何构造我的代码？最好的方法是将侧栏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 -->

{%block body%}
{%endblock%}

---

我这里的问题是，工具栏在页眉和页脚之间…

我认为您不需要将其浮动，但您应该将其绝对定位在左侧。然后，您需要将页面的其余部分填充到它周围。如果没有更多的代码或链接，我无法给出示例，但您应该能够理解我的意思

这是我做的一把小提琴：。这是你想要的吗

在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);
});

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

.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在启用滚动的情况下绝对定位。

你说的OOB是什么意思？你是否尝试过使用CSS calc？OOB->开箱即用，对不起，我用完整代码进行了更新，但我确实必须将边栏移出内容区域，因为网格不可用，并且有一些填充。。。如果要在某些页面中更改侧边（左/右）：S，则不适用，但我没有找到解决方案，因为如果我将其放在内容区域外，该栏将位于内容的前面。如果我为内容做了47px的边距，没关系，但是内容超出了右边！不，我建议在这样的场景中使用浮动的流体布局。当然，流体布局很棒，但是有一个问题，就是其他内容将放在侧边栏下。我会把它放在左边，然后在页面的其余部分使用流体布局。非常感谢，这太完美了！