Question

我正在开发一个移动应用程序，看起来像是在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。当该页面首次加载时，它不会将我的样式包含在“head”标记中，如下所示：

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

#panelMain {
    width: 80%;
}

但是只要刷新页面，就会应用所有样式。我开始怀疑它是否没有应用我在布局页面中的每个“head”标签中指定的自定义样式。我应该将它们放在单独的css文件中吗？

Answer 1

我能给予的唯一想法是。使身体的高度固定，并具有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); });

Answer 2

您可以尝试这样的事情：

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

您还可以使用属性宽度+属性边距：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;
     }
}

玩吧！

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

2 个答案: