Question

母版页目前看起来像这样：
（不，我不为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>

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

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

有谁知道如何实现这一目标？如果我的描述的任何部分不清楚，请随时询问进一步的细节。

Answer 1

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

div.content
{
    overflow: scroll;
}

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

我认为最好的解决方案是将页眉和页脚覆盖在页面内容上并使其位置固定。这会将滚动条附加到窗口而不是div标签，使其达到全高，因此可能不是您想要的。关于如何在此处完成此操作有一个很好的示例：Fixed header and footer。

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

1 个答案: