Adding a ScrollBar to a Page WITHOUT Frames
This is a simple technique but one I've used a couple of times before. I thought I would post about it just for completeness based on a recent link from Scott Guthrie to an article by Matt Berseth on Improving the Presentation of an Extra-Wide GridView. The technique presented in Matt's post seems like a good one, and I use something similar quite often, but I regularly combine it with the one that follows, where I add a scroll bar to a long grid to keep it's size (usually the width) fixed within the design. One common technique to doing this is to use an IFrame, but this is ugly, especially when the same effect can be achieved just using CSS.
Before we begin, here is a sample picture of a grid in the page with a CSS scrollbar:
To demonstrate the technique, I'm using a very simple databound GridView, as follows, but you can wrap any long area of the page similarly:
<asp:GridView ID="GridView1" runat="server"
... remaining code removed for brevity
</asp:GridView>
To get the scrollbars, wrap the content in a containing div element, then set the 'overflow' property to 'auto', as follows (I've just used an inline style for demonstration purposes, you can of course use a class, id, etc.):
<div style="overflow: auto; width: 120px; ">
<asp:GridView ID="GridView1" runat="server"
... remaining code removed for brevity
</asp:GridView>
</div>
The 'width' setting is just to show it working. You can set height as well. There are also some other settings for the overflow property, but 'auto' should work best.
You can read more about the overflow tag here and here.
This sample was, of course, created using Visual Studio 2008 Beta 2, which shows the preview of the scrollbars perfectly as well ;-).