How can I achive a non-scrolling filled-page layout in ASP?
The master page currently looks like this:
(No, I don't work for Google. The images are placeholders.)<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:开发者_JAVA百科//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>
The header and nav-bar are displayed correctly so far.
However, the footer should be centered. And the page content block should fill the space between the nav-bar and the footer, regardless of the size of the actual content. If the content is larger than this space, I want a scrollbar to appear INSIDE the content block, rather than on the entire page. Thus, the header AND the footer should always be visible, no matter where the user has scrolled on the page.
Does anyone know how this can be accomplished?
If any part of my description is unclear, feel free to ask for further details.You can add scrollbars to a div with this code. The scrollbar will automatically appear if the content is too large to fit.
div.content
{
overflow: scroll;
}
This will only get you halfway, since you also need to set the height of the content div so that the whole page has a height of 100 %. It is my experience, that you are opening a big bag of browser compatibility problems if you try to use height: 100%. You could also use JavaScript to set the height of the div on document.load and document.resize, but that would give a small but noticeable flicker when the page loads.
I think the best solution would be to overlay the header and the footer over the content of the page and make their positions fixed. This would attach the scrollbar to the window and not the div tag, making it full height, so it might not be what you want. There is a nice example on how to accomplish this here: Fixed header and footer.
加载中,请稍侯......
精彩评论