如何在 ASP 中实现非滚动填充页面布局？答案

【问题标题】：How can I achive a non-scrolling filled-page layout in ASP?如何在 ASP 中实现非滚动填充页面布局？
【发布时间】：2015-09-22 08:41:04
【问题描述】：

母版页当前如下所示：
（不，我不为 Google 工作。图片是占位符。）

<body>
    <form id="frm" runat="server">
        <%--Header (Main Logo)--%>
        <div align="right">
            <asp:Image ID="HBannImg" runat="server" AlternateText="Google"
                ImageUrl="http://www.google.com/intl/en_ALL/images/logo.gif" />
        </div>
        <%--Navigation Bar--%>
        <div>
            <asp:Image ID="NImg1" runat="server" AlternateText="GMail"
                ImageUrl="https://mail.google.com/mail/help/images/logo2.gif" />
            <asp:Image ID="NImg2" runat="server" AlternateText="Images"
                ImageUrl="http://images.google.com/intl/en_us/images/logos/images_logo.gif" />
            <asp:Image ID="NImg3" runat="server" AlternateText="Videos"
                ImageUrl="http://video.google.com/img/logo_videos.png?hl=en" />
        </div>
        <%--Main Content--%>
        <div style="background-color: #000000; color: #FFFFFF;">
            <asp:ContentPlaceHolder id="CPHBody" runat="server" />
        </div>
        <%--Footer--%>
        <div align="center" 
            style="position: absolute; bottom: 0px; text-align: center;">
            © 2009 all rights reserved
        </div>
    </form>
</body>

到目前为止，标题和导航栏已正确显示。

但是，页脚应该居中。并且页面内容块应该填充导航栏和页脚之间的空间，无论实际内容的大小如何。如果内容大于这个空间，我希望滚动条出现在内容块内，而不是在整个页面上。因此，无论用户在页面上滚动到哪里，页眉和页脚都应该始终可见。

有谁知道如何做到这一点？
如果我的描述中的任何部分不清楚，请随时询问更多详细信息。

【问题讨论】：

我不得不从您的帖子中删除图片，因为 ImageShack 已将其删除并替换为广告。请参阅meta.stackexchange.com/q/263771/215468 了解更多信息。如果可能，您最好重新上传它们。谢谢！
@Undo 太糟糕了。 Imgur 必须让他们破产。早在 2009 年和 2010 年，我就经常使用 ImageShack，因此可能会有更多使用 ImageShack 主机的旧帖子 - 但我不可能仍然拥有图像的本地副本。我想知道是否可以使用问题中的代码重新创建该屏幕截图......我认为是 ASP.NET 2.0？也许2.5？还是 2009 年的 3.0 左右？我将不得不看看是否可以使用正确的旧版本 .NET Framework 启动 IIS 主机。

标签： asp.net layout html

【解决方案1】：

您可以使用此代码将滚动条添加到 div。如果内容太大而无法容纳，滚动条会自动出现。

div.content
{
    overflow: scroll;
}

这只会让你半途而废，因为你还需要设置内容 div 的高度，使整个页面的高度为 100%。根据我的经验，如果您尝试使用 height: 100%，您将打开一大包浏览器兼容性问题。您也可以使用 JavaScript 在 document.load 和 document.resize 上设置 div 的高度，但这会在页面加载时产生轻微但明显的闪烁。

我认为最好的解决方案是将页眉和页脚覆盖在页面内容上并固定它们的位置。这会将滚动条附加到窗口而不是 div 标签，使其全高，因此它可能不是您想要的。这里有一个很好的例子来说明如何做到这一点：Fixed header and footer。

【讨论】：