I got div1 and div2 with div2 containing div1 (and some other elements). I want to dynamically change the height of div1 to match the height of div2(- the height of the other elements) whenever div1 exceeds that height. The reason I don't just set div1's height outright is because div2's size isn't fixed and I want the horizontal scroll bar from div1 to stick to the bottom of its content and not to the bottom of div2.

I don't have any code to show since it's just two divs.

If it helps, div1 will contain a table.

Here's what I got so far:

if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {       
    document.getElementById("div1").style.height = document.getElementById("div1").parentNode.offsetHeight+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

This works for setting the overflow but I can't get it to actually change the height of div1

Here's the working version:

document.getElementById("div1").style.height = '';
document.getElementById("div1").style.overflowY = "";   
if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {   
    var height = document.getElementById("div2").offsetHeight - document.getElementById("other_data").offsetHeight;
    document.getElementById("div1").style.height = parseInt(height)+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

for those who might be having the same problem.

I got div1 and div2 with div2 containing div1 (and some other elements). I want to dynamically change the height of div1 to match the height of div2(- the height of the other elements) whenever div1 exceeds that height. The reason I don't just set div1's height outright is because div2's size isn't fixed and I want the horizontal scroll bar from div1 to stick to the bottom of its content and not to the bottom of div2.

I don't have any code to show since it's just two divs.

If it helps, div1 will contain a table.

Here's what I got so far:

if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {       
    document.getElementById("div1").style.height = document.getElementById("div1").parentNode.offsetHeight+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

This works for setting the overflow but I can't get it to actually change the height of div1

Here's the working version:

document.getElementById("div1").style.height = '';
document.getElementById("div1").style.overflowY = "";   
if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {   
    var height = document.getElementById("div2").offsetHeight - document.getElementById("other_data").offsetHeight;
    document.getElementById("div1").style.height = parseInt(height)+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

for those who might be having the same problem.

• javascript
• html
• css

• 1 Can you use css min-height property? It allows you to do what you need. – Samich Commented Nov 30, 2011 at 12:57
• Correct me if I'm wrong, but doesn't the scale changes automatically when you don't set any size atts? – Michael Sazonov Commented Nov 30, 2011 at 13:01
• @Samich I don't see how it would help. I don't know the height of div2 before I actually load it, and it changes afterwards. Besides, using min-height on div1 will keep the scroll bar permanently at the bottom of div2. – Bogdan Commented Nov 30, 2011 at 13:07
• @MichaelSazonov yes, it does, but if I don't set anything and div1 bees bigger than div2, the scroll bar also shifts down and I need it to not go further than the bottom of div2. I might link a picture to explain how I want it to behave. – Bogdan Commented Nov 30, 2011 at 13:10

1 Answer 1

Something like this would work. You can write an event listener to watch for page resize, of if you're dynamically changing the size of the "parent" div tag, you should just call the js code to resize the child div each time.

HTML:

<div id=div1><div id=div2></div></div>

JS:

div2 = document.getElementById('div2')
div2.style.height = div2.parentNode.offsetHeight+"px"