Sticky Heading and Footing - April 2012

If you download this tip please consider making a modest donation.

I needed to fix the location of a heading and footing on a page and allow content to scroll between them. This month's tip shows a method to accomplish that task. I created an Asp.Net, VB.Net application to demonstrate the method. Click here to run the demo.

The Demo Application

The Asp.Net, VB.Net, VS/2008 project StickyHeaderAndFooter is documented here.


Scroll the page. Notice the heading and footing positions are fixed.
Resize the page and notice the heading and footing are resized as well.

Operative Code

The heading and footing are contained in an Asp.Net Table. Position styles are added using the Style.Add method. For example:

With Me.TableHeading
    .Width = Unit.Percentage(100)
    .Style.Add(
"POSITION", "fixed")
End With
With Me.TableFooting
    .Width = Unit.Percentage(100)
    .Style.Add(
"POSITION", "fixed")
    .Style.Add(
"bottom", "0px")
End With

Inspiration

I searched the web and found this helpful link.

http://adorr.net/2010/03/absolutestickyfloating-header-and-footer.html

Download the VB.Net Code

Download the source code by clicking on the zipped file name. Click here to run the demo application.

Download - Source Zipped File Size
VS/2008 VB.Net, ASP.Net Solution StickyHeaderAndFooter.zip 112k

Previous Tip    Tip Index    Next Tip

Home

Updated 2012/04/24