asked on

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

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

Gurvinder Pal Singh

use iscroll
http://cubiq.org/iscroll-4

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

ASKER CERTIFIED SOLUTION

saimazz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Hamel

ASKER

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.