What we would like is a page with three sections. A fixed-height header across the top, a fixed-height footer at the bottom, and a pair of panes with a vertical splitter bar between them in the middle. That's easy enough to do.
The trick is getting this to adjust to the size of the browser window. We'd like for the header and the footer to stay at the top and bottom of the window, and for all of the expansion to happen in the splitter panes. The combined width of the two panes + the splitter should always match the width of the browser window. The combined height of the panes and the header and footer should always match the height of the browser window. If this works right, we should never see scroll bars at the browser window level. Instead, we'd see scrollbars inside one or both of the splitter panes.
Right now, we're trying to sledgehammer this into working using javascript tied to window.onresize. But I'm wondering if there isn't a way of making this work using css rules.
Idea?
The trick is getting this to adjust to the size of the browser window. We'd like for the header and the footer to stay at the top and bottom of the window, and for all of the expansion to happen in the splitter panes. The combined width of the two panes + the splitter should always match the width of the browser window. The combined height of the panes and the header and footer should always match the height of the browser window. If this works right, we should never see scroll bars at the browser window level. Instead, we'd see scrollbars inside one or both of the splitter panes.
Right now, we're trying to sledgehammer this into working using javascript tied to window.onresize. But I'm wondering if there isn't a way of making this work using css rules.
Idea?