页面加载时显示页眉和页脚的滚动条

我正在开发一个移动应用程序，使其看起来像在iPad上运行。最初加载页面时，如果页面正文超出窗口/屏幕大小，则页面的滚动条显示为“超过”页眉和页脚。但是在刷新页面之后，滚动条会在页眉和页脚之间显示（也就是它只在整个页面上），这正是我想要的。页面加载时显示页眉和页脚的滚动条

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

更新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>

更新2： 一个在底部的标签进入到它的分裂20页％/ 80％。该页面使用不同的布局来完成20/80。当第一次加载页面，并没有纳入我的风格，在“头”标签，看起来像这样：

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

#panelMain { 
    width: 80%; 
}

但只要我刷新页面，所有的造型被应用。我开始怀疑它是否不会应用我在我的布局页面的每个“头”标记中指定的自定义样式。我应该把它们放在一个单独的css文件中吗？

来源

2014-02-05 ganders

此问题不再需要，因为项目正在转换为角度SPA。我没有机会尝试和建议的答案。 – ganders

我能给的唯一想法就是。使身体的高度固定并拥有overflow-y:auto;的财产。

此外，理想情况下，您希望使页眉，页眉的总高度与视图高度（浏览器高度）的高度相同。

因此修复height = ((header's height + footer's height) - browser's current height)。这是我的公式。

要做到这一点，无论是JavaScript/jQuery或CSS。

编辑

这里有一个小提琴。

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

我可能已经这样做了......我已经从布局文件中添加了body。 – ganders

不完全在body元素上，但它在包装@RenderBody（）部分的div上。我认为，这是为什么它在刷新页面后工作。 – ganders

@ganders我猜，问题是你的javascript/jQuery。加载，计算和应用您的“设置”所需的时间。我现在还不确定，因为我之前有很多其他类似问题，有不同的原因和解决方案。顺便说一句，检查我的，如果它有助于一点。 – Craftein

你可以尝试这样的事情：

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

你也可以用属性width +物业保证金玩：汽车

.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

页面加载时显示页眉和页脚的滚动条

回答

相关问题