What is the proper way to set up an HTML page so that a div's background color will expand to fill the window when the page scrolls horizontally? For example, lets say I have a wide data table that expands beyond the width of my window. If the user scrolls to the right to see all the data, I want the background colors in the header and footer to show instead of being cut off. I don't want to stop a page from scrolling horizontally or to set a fixed width for my content. I don't want to set position:fixed because I don't want these divs always in the viewport.
If you were starting a page from scratch and you only had three divs (#header, #content, and #footer), how would you style it so that the background colors of the header and footer were always visible, even when the #content div height and width varied?