?
Solved

need a Static header and footer with scrollable body that works on all browsers and ipad

Posted on 2011-10-17
3
Medium Priority
?
323 Views
Last Modified: 2012-06-21
I need a Static header and footer with scrollable body that works on all browsers and ipad.

I've pasted the code I am using below.  There are 4 styles, one for the top static header, one for the bottom static navigation bar, one for the main body, that should be scrollable behind the two static items, and then an iPad version fo the same main body.
My code behind changes the MainPanel css to the iPadNav if it senses ipad.  This works fine.

This code seems to work fine on Firefox, Chrome, Safari, and iPad.  But IE is a different issue.
On all the other browsers, the main panel can be as long as needed, and a scroll bar appears on the right.  You can scroll down to get to the bottom of the text.  But in IE, if the page is long, the scroll bar only goes from the top of the screen to the bottom of the static navigation footer.
Even if there is 100 more lines of text or images below that point, the navigation bar just does not expand.

Any idea how I can get this working on IE and keep it working on all the other browsers.
If I need to make an IE specific style, that is fine by me.
<style type="text/css">
    .staticNavFooter {
          left:5px;
          position:fixed;
          margin-left:0px;
          background-color:White;
          bottom:0;
          width:99%;
          height: 55px;
          z-index:1;
          border:1px solid #000;
        }
          .mainPanel {
          left:0px;
          margin-left:0px;
          background-color:White;
          bottom:0;
          width:100%;
          min-height:800px;
          height:100%;
          z-index:4;
          top:50px;
          bottom:56px;
        }  
    .staticHeaderMenu{
          left:5px;
          position:fixed;
          margin-left:0px;
          background-color:White;
          top: 0;
          width: 99%;
          height:50px;
          z-index:1;
          border:1px solid #000;
        }
     .iPadNav{
          left:5px;
          margin-left:0px;
          background-color:White;
          top: 0;
          width: 99%;
          height:50px;
          z-index:5;
          border:1px solid #000;
       }        
</style>

<body id="LSBody" topmargin="0" bottommargin="0" runat="server" style="height:768" >

<form id="form1" runat="server">

<asp:Panel ID="OuterPagePanel" style="" runat="server" Width="100%" Height="768" BorderWidth="0px" Wrap="True" HorizontalAlign="Center">  
<div align="center" style="height:768" >
<asp:Panel ID="InnerPagePanel" style="height:768" runat="server" Width="100%" Height="100%" BorderWidth="0px" Wrap="True" HorizontalAlign="Center">  

<asp:Panel ID="Panel1" runat="server" CssClass="staticHeaderMenu">
    <uc1:PageHeader ID="PageHeader" runat="Server"></uc1:PageHeader> 
</asp:Panel>
<br /><br /><br />

 <asp:Panel ID="MainPanel" CssClass="mainPanel" visible="True" ScrollBars="Auto" runat="server" BorderWidth="0px" HorizontalAlign="center" >
 </asp:Panel>      

<asp:Panel ID="NavPanel" runat="server" class="staticNavFooter">
<uc3:DisplayNav ID="DisplayNav" runat="Server"></uc3:DisplayNav>
</asp:Panel>
</asp:Panel>
</div>
</asp:Panel>

</form>
</body>

Open in new window

0
Comment
Question by:Robert Hamel
3 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36979288
use iscroll
http://cubiq.org/iscroll-4

we have used it in 3 applications, works like a charm
0
 
LVL 3

Accepted Solution

by:
saimazz earned 2000 total points
ID: 36979326
i attach a code template that what you need
fixed-header-and-footer.zip
0
 

Author Closing Comment

by:Robert Hamel
ID: 36981124
I took this sample and converted it a bit to match a few company specific needs.  It had enough information to get my desired result fairly easily.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question