It's hard to describe my specific problem without just showing you the HTML code.

The HTML source can be seen easily from clicking "View Source" while seeing the page http://techdot.us/projects/jeopardy/view.php. The CSS is located here: http://techdot.us/projects/jeopardy/style/gameStyle.css.

My main goal is to have the main content table rows/columns appear on the majority of the screen (everything except 69px, to be exact).

So, the bottom 69px contains an informational panel that is supposed to stay on the bottom of the screen, even when the user scrolls down the page. Scrolling is supposed to, in theory, trigger the majority of the content to go down the page normally, except the bottom bar which stays static.

I have achieved this effect on the website. However, there is a big problem. On smaller screens (as you can simulate by resizing the window), some of the main table gets cut off. It seems that my CSS solution is a botch, and, in effect, does not accomplish my main goal. The bottom bar should not cut off part of the table from the main content div (gameTable), but the main content div should display all of its content in a scrollable fashion.

My CSS at the moment works as long as the viewer's screen is a certain pixel height. This is definitely not permanent.

Thank you SO much for the help. I really appreciate it and totally understand that I'm being a total pain by just throwing down tons of CSS and HTML code to edit.