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

【问题标题】：Scrollbars showing up over header and footer on page load页面加载时显示在页眉和页脚上的滚动条
【发布时间】：2014-03-02 00:17:55
【问题描述】：

我正在开发一个看起来像是在 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 文件中吗？

【问题讨论】：

这个问题不再需要，因为项目正在转换为 Angular SPA。我没有机会尝试建议的答案。

标签： javascript jquery html css layout

【解决方案1】：

我能给出的唯一想法是。使body的高度固定，属性为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);
});

【讨论】：

我可能已经这样做了...我已经从布局文件中添加了正文。
不完全在 body 元素上，但它在包装 @RenderBody() 部分的 div 上。我认为这就是它在页面刷新后起作用的原因。
@ganders 我猜，问题出在你的 javascript/jquery 上。加载、计算和应用“设置”所需的时间。我现在不确定，因为我之前遇到过很多其他类似的问题，原因和解决方案不同。顺便说一句，看看我的是否有帮助。

【解决方案2】：

你可以试试这样的：

.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;
     }
}

随便玩吧！

【讨论】：