1 2 3
1 2 3 4 5 6 7 8 9 10 11
The ‘tab-content’ div is enclosed within a parent container that’s visible to the user due to border styling. The intent here was that ‘tab-content’ should always be set to a height such that its parent has a consistent amount of spacing between its bottom border and the browser window. Fittable attaches itself to ‘tab-content’, and on every browser resize, it calculates a new height for ‘tab-content’. At first, the height of ‘tab-content’ is set to the total height of the browser. Fittable then recursively iterates over tab-content’s parent, and its parent, until it reaches the body tag. On each iteration it subtracts the outerHeight of the element from its height, removing all margin and padding from tab-content’s final height. It also removes the height of any siblings that are nonfloat elements. At the end of the loop, it sets the new height of the tab-content div.
What was strange was that the browser would consistently set a lower-height for ‘tab-content’ than expected. Somewhere in this loop, extra pixels were being subtracted from ‘tab-content’s calculated height. The first time the page loaded, elements would be sized correctly, but upon resize, the elements would be misaligned. Even when I manually fired fit() through the console, ‘tab-content’ would still be missing height.
To get around this, I modified fittable so it only subtracted the sibling tag’s height if the element was a non-float, non-script, and visible element to the user.