SubtractJS is a layout assistant for HTML that makes it easy to mix fixed-width or fixed-height elements on the page edges with a re-sizable body. It is great for managing headers, footers, menu bars, navigation elements, or advertising elements.
This summer, I set out to re-do this part of the project in a cross-browser, re-usable solution. As it turns out, SubtractJS is more powerful than I imagined, and works in every browser I tested it in. (I suspect I may have the jQuery dependency to thank for this.) So far, I have tested in Chrome 31, IE 8, 9, 10, 11, Firefox 26, Midori on Raspberry Pi and it just works everywhere.
SubtractJS lets you use standard CSS properties to control your layout. The five classes, “sj-fill-top”, “sj-fill-bottom”, “sj-fill-left”, “sj-fill-right”, and “sj-fill” tell SubtractJS how to manipulate your page. On every resize, SubtractJS computes the width or height needed to fill the parent element and still allow space for your padding, border, and margin.
SubtractJS works best when the style tag for the affected elements does not contain values for height, width, margin, padding, border, or overflow. Define these properties in a style that you apply to the element via a style sheet. See the SubtractJS samples or the SubtractJS preview page for some examples of how this can work.