Well think it this way, when you specify 100% you are talking relative. 100% of what? From your description the div is working as expected.
If you want to cover known space you will need to set Absolute hight. But that won't be fun, as it will mess up the design. A work around is to use javascript and set your height during the page load.
I'd similar issue, with iframe, not div. The work around is similar. Look at my solution below.
$(function () {
if ($.browser.safari || $.browser.opera) {
$("#ttframe").load(function () {
setTimeout(resizeAllIFrames, 0);
}
);
}
else {
resizeIFrame();
$("#ttframe").load(resizeIFrame);
}
});
function resizeIFrame() {
if ($.browser.safari || $.browser.opera) {
}
else {
var ttfrm = $("#ttframe");
var innerDoc = (ttfrm.get(0).contentDocument) ?
ttfrm.get(0).contentDocument :
ttfrm.get(0).contentWindow.document;
ttfrm.height(innerDoc.body.scrollHeight + 35);
}
}
function resizeAllIFrames() {
var ttfrm = $("#ttframe");
var innerDoc = (ttfrm.get(0).contentDocument) ?
ttfrm.get(0).contentDocument :
ttfrm.get(0).contentWindow.document;
ttfrm.height(innerDoc.body.scrollHeight + 35);
}