How to make a div have the required height no matter what?

I'm trying to make a div fill up the p开发者_Python百科age, but it seems to be only as long as the content I put in it. This is my css code:

.myDiv
{
    height:  30%;
}

What can I do to make it be that height whether the div is empty or has some content? (The content won't extend past the height I set here).

You are using percentages so the height of the div depends directly on its parent. Make sure the parent has a height. If the direct parent is the body then:

body{
   height:100%;
}

If you know the exact height you want you for the div you should be using pixels like height:300px;

You could do something like this. (I know you didn't ask about jQuery... but it is another option)

var height = $(document).height();
$('#myDiv').css('height', height);

http://jsfiddle.net/jasongennaro/pNHzE/1/