I have always wanted to know how some of the fancy layouts that Google uses actually work. The mail and reader applications both have sections within the page which I always assumed where just inline frames with the iframe tag which I personally avoid. But I recently discovered that you can achieve the same affect using div tags with the CSS value for overflow set to auto or scroll while the height is also set.
I decided to try this out on my blog with the following script which sets the page displaying single posts as the overflow section with the height set based on the height of the current window. I also have it reset the height anytime the window is resized. This script leverages jQuery which I am leveraging more all the time.
You may notice that I chop off 220 pixels from the height for the overflow block to account for the sections of the page which fill the rest of the page. Now the header for my blog is always in view on the single post pages. Now I would like to further adjust the layout of the page to make it more useful to take advantage of the parts which are always in view.
I also learned that you can set overflow to hidden while setting the text in the block to not wrap by setting the whitespace rule to nowrap. When the width of the block is set the text which does not fit in the block is simply not shown. This is how you the mail listing works on the main Google Mail page. This technique will be useful when trying to fit content into a page of unknown width which is nearly alway the case. Instead of arbitrarily cutting off some text after 30 characters I can now let the the browser handle it. I have tried it out on IE 6, IE 7 and Firefox and it works perfectly in each browser.