Полоса прокрутки, отображающая верхний и нижний колонтитулы на загрузке страницы

Я разрабатываю мобильное приложение, чтобы оно выглядело так, как будто оно работает на iPad. Когда страница изначально загружается, если тело страницы находится за пределами размера окна/экрана, полосы прокрутки для страницы отображают «над» верхний и нижний колонтитулы. Но после того, как вы обновите страницу, полосы прокрутки появятся внутри BATWEEN заголовка и нижнего колонтитула (иначе это только по телу), и это то, что я хочу.Полоса прокрутки, отображающая верхний и нижний колонтитулы на загрузке страницы

Я не могу дублировать точное поведение (где полосы прокрутки отображаются только после тела) после jsfiddle, но, по крайней мере, показывает полосу прокрутки по всей странице.

Любая помощь приветствуется ...

Here's the jsfiddle...

Вот код, у меня есть: CSS:

.locationListItem { 
    margin-bottom: 5px; 
} 

.locationListPrimary { 
    color: blue; 
    font-weight: bold; 
    font-size: medium; 
} 

.locationListSecondary { 
    font-weight: bold; 
    font-size: smaller; 
}

HTML:

@section header { 
    @* 
     Recommeneded to use an h1 element, but can contain any kind of element, but make sure to add the TrailsHeaderPrimary class to get the proper styling... 
     Using an h1 element will get the proper padding around the header line. To see the difference, try doing an h1 vs p *@ 
    <h1 class="testHeaderPrimary">Search Locations</h1> 
} 

<div style="top: 15px; left: 15px; width: 100%; z-index: 2"> 
    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search/Filter Locations..."> 
     @foreach (var location in Model.AvailableLocations) 
     { 
      <li> 
       <a href="#"> 
        <div class="ui-grid-b"> 
         <div class="ui-block-a"><span class="locationListPrimary" style="width: 20%">@location.Thing</span></div> 
         <div class="ui-block-b"><span class="locationListPrimary" style="width: 20%">@location.Person</span></div> 
         <div class="ui-block-c"><span class="locationListSecondary" style="width: 60%">@location.Year | @location.Stuff | @location.Type</span></div> 
        </div> 
       </a> 
      </li> 
     } 
    </ul> 
</div> 

@section navBar1 { 
    <a href="/Search/Index" style="font-size: x-large">Search</a> 
} 

@section navBar2 { 
    <a href="/Location/Index" style="font-size: x-large">Location</a> 
} 

@section navBar3 { 
    <a href="/LocationStrip/Index" style="font-size: x-large">LocationStrip</a> 
} 

@section navBar4 { 
    <a href="http://stackoverflow.com/" style="font-size: x-large; height: 60px" target="_blank">StackOverflow</a> 
} 

@section navBar5 { 
    <a href="#" style="font-size: x-large" target="_blank">NA</a> 
}

Javascript (от Макет):

$(document).ready(function() { 
    resetScreenSize(); 
}); 

$(window).resize(function() { 
    resetScreenSize(); 
}); 

var resetScreenSize = function() { 
    var windowHeight = $(window).height(); 
    var header = $('#testHeader'); 
    var headerHeight = header.outerHeight(); 
    var footer = $("#testFooter"); 
    var footerHeight = footer.outerHeight() - 1; 

    $(".ui-grid-a").height(windowHeight - footerHeight - headerHeight); 
    $("#panelMain").height(windowHeight - footerHeight - headerHeight); 
};

Update 1: Вот тело из файла макета ...

<body style="height: 100%"> 
    <div id="main" role="main" class="ui-content jqm-content" style="padding: 0; height: 100%;"> 
     <div id="testHeader" data-role="header" data-theme="b" data-position="fixed"> 
      @RenderSection("header", false) 
     </div> 

     <div class="ui-grid-a" data-theme="a"> 
      <div id="panelMain" style="overflow: auto;"> 
       <div class="ui-content"> 
        @RenderBody() 
       </div> 
      </div> 
     </div> 

     <div id="testFooter" data-role="footer" data-theme="b" data-position="fixed" data-tap-toggle="false" style="height: 60px; display: block;"> 
      <div data-role="navbar"> 
       <ul> 
        <li>@RenderSection("navBar1", true)</li> <!-- Home/1 should be reserved for the home screen --> 
        <li>@RenderSection("navBar2", true)</li> 
        <li>@RenderSection("navBar3", true)</li> 
        <li>@RenderSection("navBar4", true)</li> 
        <li>@RenderSection("navBar5", true)</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body>

Update 2: Одна из вкладок в нижней части идет на страницу, где он расщепляется 20 %/80%. Эта страница использует другой макет для выполнения 20/80. Когда эта страница сначала загружает, он не включает в свой стиль в «голове» тег, который выглядит следующим образом:

#panelLeft { 
    width: 20%; 
    border-right: 3px solid 
} 

#panelMain { 
    width: 80%; 
}

Но как только я обновить страницу, все стиль применяется. Я начинаю задаваться вопросом, не применяет ли мой стиль стиль, который я указываю в каждом из тегов «head» на моих страницах макета. Должен ли я размещать их в отдельном файле css?

источник

2014-02-05 ganders

Этот вопрос больше не нужен, потому что проект преобразуется в угловой SPA. У меня не было возможности попробовать и предложить ответы. – ganders

Единственная идея, которую я могу дать, это. Сделайте высоту тела фиксированной и имеют свойство overflow-y:auto;.

Кроме того, в идеале вы должны сделать общую высоту заголовка, тела и нижнего колонтитула одинаковой с высотой высоты просмотра, высоты браузера.

Так исправить height = ((header's height + footer's height) - browser's current height). Это моя формула.

Для этого либо javascript/jQuery, либо css.

EDIT

Вот скрипку.

http://jsfiddle.net/4RLZv/

Забыли мои JS/JQ

$(document).ready(function() { 
    var height = $('#head').outerHeight() + $('#foot').outerHeight(); 
     height = $(window).innerHeight() - height; 
    $('#body').css('height',height); 
});

источник

2014-02-05 14:17:06 Craftein

Возможно, я уже это сделал ... Я добавил тело из файла макета. – ganders

Не совсем на элементе body, но он находится на div, который обертывает раздел @RenderBody(). По-моему, это почему-то работает после обновления страницы. – ganders

@ganders Я угадываю, проблема в вашем javascript/jquery. Время, необходимое для загрузки, вычисления и применения ваших настроек. Теперь я не уверен, так как у меня было множество других подобных проблем, прежде чем с различными причинами и решениями. Кстати, проверьте мои, если это поможет даже немного. – Craftein

Вы можете попробовать что-то вроде этого:

.ui-grid-a { 
    position: absolute; 
    top: 68px; 
    bottom: 63px; 
    left: 0; 
    right: 0; 
    overflow-y: auto; 
}

Также вы можете играть с шириной собственности + маржа недвижимости: авто

.ui-grid-a { 
    position: absolute; 
    top: 68px; 
    bottom: 63px; 
    left: 0; 
    right: 0; 
    overflow-y: auto; 
    margin: auto; 
    width: 900px; 
}

Где ширина должна быть установлена для каждого размера дисплея отдельно, например.

@media screen and (min-width: 768px) { 
    .ui-grid-a { 
     width: 600px; 
    } 
} 
@media screen and (min-width: 968px) { 
    .ui-grid-a { 
     width: 800px; 
    } 
}

Просто поиграйте с ним!

источник

2014-02-05 14:49:08 heroin

Полоса прокрутки, отображающая верхний и нижний колонтитулы на загрузке страницы

ответ

Смежные вопросы