The following process has been used successfully in Website X5 Evolution version 10 to keep a header and horizontal menu both fixed at the top of the browser window and the footer at the bottom, regardless of the actual page height. The main page contents will scroll and go behind the header and footer. You can also apply these “sticky” features to header and footer backgrounds if you use these to extend the display to the full width of the browser window. 

Import your project into Website X5 and navigate to the Template Selection page.

Highlight the template to be used and press the Edit button on the right. 

On the Template Edit page, select Page Background in the Page section drop-down list

In Content Properties lower down the page, set the margins of Page Background to zero (by default, X5 sets these to 15)

Select in turn Header, Footer and Menu, and make a note of the height of each. Normally, the Header Background height will be the sum of the Header and Menu heights and the Footer background height will be equal to the Footer height, but that doesn’t matter in this application.

Press the OK button at the bottom of the page to save changes and select Edit Graphic Template on the left hand menu. 

On the Edit Graphic Template page, there are tabs that allow you to select either the Header or the Footer. We are going to add some HTML code and it doesn’t matter whether you add the code to the Header or Footer, but as you get to the Header first, you might as well add it there.

Towards the top of the window is a row of small buttons. Press the script button second from right and this will add a widget (which does not show in the actual web site) to the header and open a box at the bottom of the page, where you will add your code. 

Copy and paste this code into the box (but note that the box will only be visible while the widget is highlighted and you can see the 8 little square handles around it): 

<style type="text/css">

#imHeaderBg {position:fixed;  z-index: 50;}

#imHeader {position: fixed; top: 0px; width: 960px;  z-index: 50;}

#imMnMn{position:fixed; top: (height of header)px; left:auto; z-index:50; }

#imContent, #imContentGraphics {padding-top: (height of header + height of menu + gap)px; padding-bottom: (height of footer + gap)px;}

#imFooterBg {position:fixed !important;  z-index: 50;}

#imFooter {position:fixed; bottom:0px; z-index: 50;}

</style>

You now need to edit the code to your needs:

If you do not use the Header Background, you can delete the line beginning #imHeaderBg

If you do not use the Footer Background, you can delete the line beginning #imFooterBg

Change (height of header) etc.to the actual numbers you have noted down. So, for example, if your header is 100 pixels high, the line beginning #imMnMn would incorporate the code

top: 100px; 

You need to put a value on the term gap. This determines what the minimum space is between the bottom of the menu and the start of the page content, and between the bottom of the page content and the footer. 5 pixels is a good starting point, but you can adjust this to your liking and you can use a different value for gap at the top and bottom if you want. So, for example, if your Header height is 100, your Menu height is 50, your Footer height is 120, you want 5 pixels gap at the top and 10 at the bottom, your code for the page contents would read:

#imContent, #imContentGraphics {padding-top: 155px; padding-bottom: 130px;}

If you prefer to have the Menu at the very top and the Header immediately below it, the code for those two features becomes:

#imMnMn {position: fixed; top: 0px; left:auto;  z-index: 50;}

#imHeader {position:fixed; top: (height of menu)px; width: 960px; z-index:50; } 

The value 960px is used because the default page width is 960 pixels. If yours is different, change this value to suit. 

The code

z-index: 50;

determines the order of items on the screen. The higher the number, the more forward the item. A value of 50 is greater than the default value for the main page contents, so the menu, header and footer are always visible in front of the page contents.

Finally, note the use of curly brackets { } in the code. If you accidentally erase one of these, take care you don’t replace it with a normal bracket ( ) or the code will not work.

That’s it. Use the preview to check that you get the results you want before uploading.