As an update, I've gotten a function (adjustHeight) that works pretty well within IE7 and doesn't need to work in IE6 since contents cant spill out of divs under that rendering.
It's a little simpler. Below is my code. Maybe someone knows why Firefox isn't interpreting it as I expect? I don't think any DOM properties I use are unsupported (I've used them in other ways successfully) so I'm not sure what's up.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var timedEvent = null;
function adjustHeight() {
if (document.getElementById('tableless')) {
var allDivs = document.getElementsByTagName('div');
for (var i=0; i < allDivs.length; i++) {
if (allDivs[i].className=='contentContainer') {
if (allDivs[i].firstChild && allDivs[i].firstChild.scrollHeight) {
if (allDivs[i].firstChild.offsetHeight > allDivs[i].offsetHeight) {
document.getElementById('tableless').style.height = 'auto';
break;
}
else if (allDivs[i].firstChild.offsetHeight <= allDivs[i].offsetHeight) {
if (document.getElementById('tableless').style.height == 'auto') {
document.getElementById('tableless').style.height = '88%';
adjustHeight();
}
}
}
}
}
}
}
function slowResize () {
clearTimeout(timedEvent);
timedEvent = setTimeout('adjustHeight()', 80);
}
window.onload = adjustHeight;
window.onresize = slowResize;
</script>
<style type="text/css">
html, body {
height: 96%;
}
body {
background-color: gray;
}
div.inner {
width: 92%;
height: 88%;
padding: 0px;
margin: 4%;
background-color: white;
}
</style>
<title>height adjust</title>
</head>
<body>
<div class="inner" id="tableless">
<div class="contentContainer" style="height: 40%; background-color: orange;">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
</div>
<div class="contentContainer" style="height: 25%; background-color: aqua;">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
</div>
<div class="contentContainer" style="height: 25%; background-color: pink;">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida ipsum sed sem. Praesent orci velit, rhoncus ut, ullamcorper a, blandit quis, nibh. Mauris et felis aliquam pede bibendum consectetuer. Maecenas enim risus, auctor tempor, tempus vel, laoreet volutpat, ipsum. Morbi varius arcu in pede. Fusce pretium, quam eget consequat gravida, augue odio sollicitudin augue, eget lacinia purus augue at lorem. Mauris ullamcorper enim a magna. Donec metus. Pellentesque ullamcorper. Nullam eget dui. Etiam sed quam a est adipiscing tincidunt. Ut libero.
</div>
</div>
</div>
</body>
</html>[/HTML]
Here is my function, outside of HTML:
- function adjustHeight() {
-
-
if (document.getElementById('tableless')) {
-
var allDivs = document.getElementsByTagName('div');
-
for (var i=0; i < allDivs.length; i++) {
-
if (allDivs[i].className=='contentContainer') {
-
if (allDivs[i].firstChild && allDivs[i].firstChild.scrollHeight) {
-
if (allDivs[i].firstChild.offsetHeight > allDivs[i].offsetHeight) {
-
document.getElementById('tableless').style.height = 'auto';
-
break;
-
}
-
else if (allDivs[i].firstChild.offsetHeight <= allDivs[i].offsetHeight) {
-
if (document.getElementById('tableless').style.height == 'auto') {
-
document.getElementById('tableless').style.height = '88%';
-
adjustHeight();
-
}
-
}
-
}
-
}
-
}
-
}
-
}
6
