Avoid the use of Javascript for resizing elements and opt for CSS instead. This will result in cleaner, easier to edit, and more efficient code. No need to manually calculate heights with Javascript; utilize CSS positioning for desired results.
In particular, set your main content div to take up the entire page height, excluding the header and footer:
#content {
position: fixed;
bottom: 40px;
top: 100px;
}
Adjust the contents dynamically within that div. For instance, make your sidebar-holder take up the full height of the #content div with the following CSS:
#sidebar-holder {
position: absolute;
top: 0;
bottom: 0;
}
For the "splitter" div, consider using a CSS border for better implementation:
#sidebar-holder {
border-right: 5px solid black;
}
Instead of complex absolute positioning, utilize position: relative in parent elements and position:absolute in child elements. This approach allows for precise positioning within the parent box defined by relative positioning.
The provided CSS-only solution addresses your needs without the need for pixel calculations, ensuring proper behavior during page resizing without triggering unnecessary jQuery code on resize events.