How do I dynamically set the <div> to the correct length?

How can I set the height (dynamically) of the yellow <div id="box"> to fit inside the <div id="center"> without overlapping the Hello World section?

Please ignore the JavaScript, in the jsfiddle, its part of something else ;p

http://jsfiddle.net/XskMm/3/

Thank you for reading and answering!

EDIT:

I apologize for the poor phrasing the question. I'll try to explain exactly what I want.

There are two main <div>s on the page. I made one gray and one yellow. I wish to make the yellow div fit inside of the gray one (both length and width) and not开发者_开发技巧 protrude over the outline of the gray div.

My problem is that the <h1> and the <hr /> are pushing the <div id="box"> down (like they should), but the <div id="box"> isn't shrinking to the appropriate height so that it does not extend over the bottom of the <div id="center">

Alright... trying this again. If this isn't what you want, let me know.

Working example: http://jsfiddle.net/XskMm/8/

The code:

window.onresize = function() { myResizeFunc();  }

function myResizeFunc() {
    var DOMwidth = window.innerWidth? window.innerWidth: window.document.body.parentElement.clientWidth;
    var DOMheight = window.innerHeight? window.innerHeight: window.document.body.parentElement.clientHeight;
    if (DOMwidth>200) { document.getElementById('center').style.width = (DOMwidth-100) + 'px'; }
     else { document.getElementById('center').style.width = '100px'; }
    if (DOMheight>300) {
        document.getElementById('center').style.height = (DOMheight-100) + 'px';
        document.getElementById('box').style.height = (DOMheight-122) + 'px';
    }
     else {
         document.getElementById('center').style.height= '200px';
         document.getElementById('box').style.height= '178px';
    }

}

window.addEvent('domready', function() {
    myResizeFunc();
});

So you have this:

<div id="center">
    <h1> ... </h1>
    <div id="box"> ... </div>
</div>

The #center element has a height of 300px. The H1 element has an variable height (its height is not fixed). And you want the #box element to take up the remaining height. like do:

#box height = #center height - H1 height

That cannot be done in CSS. The possible solutions are:

a) JavaScript
b) HTML Tables
c) Let the H1 element have a fixed height (I recommend this!)

Here's a possible solution- why not abandon <div> #center altogether? Since the header will always be on top and you want the height of the bounding area to be the same, try experimenting with this:

<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square"> One </p>
<p class="drag square"> Two </p>
</div>

That way, your markup is simplified, and you don't have to worry about expanding the height of div #box. (Note: Of course, you'll have to switch around some of the CSS to accommodate the new layout).

You could set a top margin on the <div id="box">.

I hope this is what you meant. If not, you're going to have to explain your question better.

Working example: http://jsfiddle.net/XskMm/7/

The code:

window.onresize = function() { myResizeFunc();  }

function myResizeFunc() {
    var DOMwidth = window.innerWidth? window.innerWidth: window.document.body.parentElement.clientWidth;
    if (DOMwidth>200) { document.getElementById('center').style.width = (DOMwidth-100) + 'px'; }
     else { document.getElementById('center').style.width = '100px'; }
}

window.addEvent('domready', function() {
    myResizeFunc();
});

A couple of the comments lead me to this idea, mainly Sime's suggestion.

The <div id="box"> is pushed down off of <div id="center"> height wise because of <h1> and <hr />.

To make <div id="box"> shrink accordingly (height wise), I set <h1> to a fixed-percentage and <div id="box"> to a fixed-percentage.

#box {
    min-height: 90%;

    background-color: #FF3;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    opacity: 0.5;
}

h1 {
    height: 10%;
}

The percentages total 1.0, so they will fill up the entire <div id="center">.