Используйте шаблон липкого нижнего колонтитула Bootstrap с фиксированной панелью навигации во всей оболочке Durandal

Мне интересно, как переопределить стили представления оболочки, внедряемые в Durandal внутри div с помощью id="applicationHost"... Я пытаюсь использовать общий шаблон Bootstrap (липкий нижний колонтитул с фиксированной панелью навигации), и он работает как автономный, но как только я использую его в shell.html, "обертка" теряет свою автоматическую высоту...

Вот мой shell.html

<div>
    <div id="wrapper">
            <!-- ko compose: {view: 'nav'} -->
            <!-- /ko--> 

        <div id="content" class="container-fluid">
            <!--ko compose: { 
                model: router.activeItem, //wiring the router
                afterCompose: router.afterCompose, //wiring the router
                transition:'entrance', //use the 'entrance' transition when switching views
                cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
                }--><!--/ko-->                                 
        </div>
        <div id="push"></div>
    </div>
     <footer id="footer">
         <div class="container-fluid">
             <div class="row-fluid">
                 <div class="span6"><p class="muted">&copy; ABC Company Inc. 2013. All rights reserved.</p></div>
                 <div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>     
             </div>
         </div>
     </footer>

 </div>

подвид навигации имеет только стандартный <nav id="mainnav" class="navbar navbar-fixed-top">, а стили такие же, как на странице примера Bootstrap...

Когда я изучаю стили через Firebug, я ясно вижу, что div-оболочка потерял свою полную высоту... Сводит меня с ума! :)


css twitter-bootstrap durandal
person zam6ak    schedule 13.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я исправил это, добавив следующий стиль на свою главную html-страницу после стилей, необходимых для работы липкого нижнего колонтитула.

/*durandal fixes*/
#applicationHost, #applicationHost > div
{
    height: 100%; 
}

Первый селектор отвечает за div applicationHost на главной html-странице, а второй — за вставленный durandal (у него есть класс durandal-wrapper, поэтому при желании вы можете сделать селектор более конкретным). Поскольку у вас есть дополнительный div в файле shell.html, вам может понадобиться следующее:

/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
    height: 100%; 
}
person daveb    schedule 14.05.2013
comment
Я пробовал этот и несколько других вариантов, но есть проблемы с вертикальной полосой прокрутки в разных браузерах, и при использовании адаптивных макетов она ломается. - person zam6ak; 28.05.2013