Question

I have 3 divs:

.main_content, .content_top, .content_bottom

.main_content is set to 100% but 100% is not the size of the browser window, it’s inside the middle of my page.

.content_top is set at 60% height.

I want to set the height of .content_bottom to the rest of the space available inside .main_content via javascript.

For example, if .main_content was 800px high, and .content_top was 600px high, I want to set .content_bottom to 200px.

This is a simplified example, my situation is not as easy as specifying 40% or leaving the browser to decide. For one, there’s currently 46px of padding on .content_top. I’m doing a split screen like interface between .content_top and .content_bottom dragging a bar to resize both. This is mostly working, just having trouble with the bottom portion. Being able to set .content_bottom to a specific height(i.e. 198px) would solve all of my current problems. Happy to elaborate on this example, as well as dig into some actual code, but was hoping there was an easy method for calculating this and was having trouble finding a good example that worked cross-browser, thanks!

Answer 1

Assuming you’re using vanilla JavaScript (and not a library), I’d suggest:

​var cBs = ​document.getElementsByClassName('content_bottom');

for (var i=0,len=cBs.length; i<len; i++){
    var p = cBs[i].parentNode;
    cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px';
}​​​​​​​​​​

JS Fiddle demo.