The Stump the Panel forum has some real gems buried within the hundreds of questions. I was looking at some of the responses a few days back and saw an interesting thread on fixed navigation. EvilGenius, aka Daniel Walker, started the discussion, answered his own question and then proceeded to document his solution.

I sent a quick email to request the masterpage layout and he was kind enough to pass it along.

Problem statement, as stated in the original question:
“I want to create a master page where the top and left navigation areas stay on the screen and only the main content can scroll (unless the left navigation is bigger and then it should scroll too). Basically, it would be like the frames pages from a few years back. I want the page to be maximized on the screen, but again keep the top part of the page fixed and allow the main content to scroll. I have tried different combinations of tables,divs, and css styling, but can not seem to get it right. I have to make it work in IE 6 because that is what everyone will be using for the forseeable future. I am in WSS 3 and have Designer and VS 2008 available.”

Then, he responded to himself:
“I have got it! Screams of delight were uttered once I figured it out!. I used a table set for max height and width and then put a div in the cell that I wanted to scroll. Using javascript and the _spBodyOnLoad function I got the height of the cells that the divs reside in and then used this to set the height of the divs in javascript. The divs were styled to scroll and now my top section stays on the page and the bottom sections scroll as required!!”

Someone asked for details, and the response came back:
“Actually I have done a little more since that last post and I have made it a little better. This requires a change to the master page. What I did was to remove the outer table element and I created 4 main divs. There is a main div that is set to 100% height and width. I left all the top stuff up to the main navigation bar in one top div and then the rest of the stuff in a body div. I added a footer as the next div. Using css I just styled the footer to stay at the bottom (width: 100%, height: 30px, bottom: 0px (this is important), left: 0, position:absolute). The top div had similar settings but it was set to (top: 0px, position: relative). This left the body div as the one I wanted to scroll if I needed to. I have also used jQuery to only need to scroll a list view but that is another post!

“So this body div I set to (position: absolute, left: 0, width: 100%, overflow: auto, z-index: -500 (to ensure that any menu dropdowns would show up over the div)). Then when the page loads I have a javascript function that gets the main height of the page and sets the top of the footer to that minus 30 and then subtracts the height of the top div and I set the top of the body div and then set it’s height. I have to set the height because the overflow requires it. I also have that function called on window resize to mostly keep it the same. Does that help? I am not sure if I can get the code on here but if so I will try to do so.”

I emailed and asked for the masterpage code itself. You can download it to have your own copy.

Daniel Walker
aka “EvilGenius” on Stump the Panel

I like movies, robotics, astronomy and of course Sharepoint. I like to dabble in 3D artwork and can sometimes be caught reading a novel. Programming is just who I am more so than what I do.