JQuery-mobile, left sidebar/toolbox

Question

У меня возникли трудности с созданием панели инструментов боковой панели в моем приложении jQuery-mobile.

Я хочу сделать так: http://www.paultrifa.com/envato/themeforest/side/red/preview/ с фиксированной левой навигационной панелью. Я видел в документе, что верхний и нижний колонтитулы имеют встроенную «фиксированную» функцию, но не могут найти что-то из коробки для моих нужд.

Я проверил систему Grid (один с фиксированным размером в PIXEL - для панели инструментов), а другая часть (содержимое страницы) реагирует, но это очень глючит!

И как мне создать свой код? Лучший способ - разместить HTML-код боковой панели вне контейнера страницы, но у меня есть некоторые проблемы.

Я попытался с основным CSS:

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

Это работает, но содержание страницы обрезается. Я должен изменить размер ширины контейнера «страница», но размер моей панели в пикселях, поэтому у меня есть еще одна проблема ...

Если у кого-то есть подсказки, это будет здорово!

Edit:

Полный код:

<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

Вот скрипка, которую я сделал: 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); 
}); 

В пределах содержимого страницы, у меня есть боковая панель 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 - абсолютно свободные позиции с включенной прокруткой.

Answer 2

Я думаю, вам нужно не float это, но вы должны absolutely position налево. Тогда вам нужно, чтобы остальная часть вашей страницы заполнила его. Без кода или ссылки я не могу привести пример, но вы должны уловить мой дрейф.